/* ============================================================ KK TEKNIK FISIKA ITB — global-styles.css Style Global & Navigasi (Muat secara site-wide / global) ============================================================ */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap'); /* ── CSS Variables ────────────────────────────────────────── */ .kk-tf { --kk-primary: #003366; --kk-primary-dark: #002244; --kk-primary-light: #0055A5; --kk-accent: #E6A817; --kk-accent-dark: #C68F10; --kk-bg: #F5F7FA; --kk-bg-alt: #EEF2F7; --kk-white: #FFFFFF; --kk-text: #1A2A3A; --kk-text-light: #3A4A5A; --kk-muted: #6C7A89; --kk-border: #DDE3EB; --kk-shadow-sm: 0 2px 8px rgba(0, 51, 102, 0.08); --kk-shadow-md: 0 4px 20px rgba(0, 51, 102, 0.12); --kk-shadow-lg: 0 8px 40px rgba(0, 51, 102, 0.16); --kk-radius-sm: 6px; --kk-radius-md: 12px; --kk-radius-lg: 20px; --kk-radius-xl: 32px; --kk-font: 'Inter', sans-serif; --kk-font-display: 'Playfair Display', serif; --kk-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --kk-max-width: 1200px; } /* ── Reset & Box Model ────────────────────────────────────── */ .kk-tf *, .kk-tf *::before, .kk-tf *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .kk-tf { font-family: var(--kk-font) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--kk-text) !important; background-color: var(--kk-bg) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ── Typography ───────────────────────────────────────────── */ .kk-tf h1, .kk-tf h2, .kk-tf h3, .kk-tf h4, .kk-tf h5, .kk-tf h6 { font-family: var(--kk-font) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--kk-text) !important; } .kk-tf h1 { font-size: 2.5rem !important; } .kk-tf h2 { font-size: 2rem !important; } .kk-tf h3 { font-size: 1.5rem !important; } .kk-tf h4 { font-size: 1.25rem !important; } .kk-tf h5 { font-size: 1.125rem !important; } .kk-tf h6 { font-size: 1rem !important; } .kk-tf p { font-size: 1rem !important; line-height: 1.75 !important; color: var(--kk-text-light) !important; margin-bottom: 1rem !important; } .kk-tf a { color: var(--kk-primary) !important; text-decoration: none !important; transition: var(--kk-transition) !important; } .kk-tf a:hover { color: var(--kk-accent) !important; } .kk-tf img { max-width: 100% !important; height: auto !important; display: block !important; } .kk-tf ul, .kk-tf ol { list-style: none !important; } /* ── Layout Utilities ─────────────────────────────────────── */ .kk-tf .kk-container { max-width: var(--kk-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .kk-tf .kk-section { padding-top: 5rem !important; padding-bottom: 5rem !important; } .kk-tf .kk-section-sm { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* ── Grid System ──────────────────────────────────────────── */ .kk-tf .kk-grid { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; } .kk-tf .kk-grid-2 { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; } .kk-tf .kk-grid-4 { display: grid !important; gap: 1.5rem !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; } /* ── Card Component ───────────────────────────────────────── */ .kk-tf .kk-card { background: var(--kk-white) !important; border-radius: var(--kk-radius-md) !important; border: 1px solid var(--kk-border) !important; box-shadow: var(--kk-shadow-sm) !important; overflow: hidden !important; transition: var(--kk-transition) !important; } .kk-tf .kk-card:hover { transform: translateY(-4px) !important; box-shadow: var(--kk-shadow-md) !important; border-color: rgba(0, 51, 102, 0.2) !important; } .kk-tf .kk-card-body { padding: 1.5rem !important; } .kk-tf .kk-card-img { width: 100% !important; height: 200px !important; object-fit: cover !important; } /* ── Badge ────────────────────────────────────────────────── */ .kk-tf .kk-badge { display: inline-block !important; padding: 0.25rem 0.75rem !important; background: rgba(0, 51, 102, 0.1) !important; color: var(--kk-primary) !important; border-radius: 100px !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .kk-tf .kk-badge-accent { background: rgba(230, 168, 23, 0.15) !important; color: var(--kk-accent-dark) !important; } /* ── Button ───────────────────────────────────────────────── */ .kk-tf .kk-btn { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.75rem 1.75rem !important; border-radius: var(--kk-radius-md) !important; font-weight: 600 !important; font-size: 0.9rem !important; cursor: pointer !important; transition: var(--kk-transition) !important; border: 2px solid transparent !important; text-decoration: none !important; letter-spacing: 0.02em !important; } .kk-tf .kk-btn-primary { background: var(--kk-primary) !important; color: var(--kk-white) !important; border-color: var(--kk-primary) !important; } .kk-tf .kk-btn-primary:hover { background: var(--kk-primary-dark) !important; color: var(--kk-white) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0, 51, 102, 0.3) !important; } .kk-tf .kk-btn-outline { background: transparent !important; color: var(--kk-primary) !important; border-color: var(--kk-primary) !important; } .kk-tf .kk-btn-outline:hover { background: var(--kk-primary) !important; color: var(--kk-white) !important; } .kk-tf .kk-btn-accent { background: var(--kk-accent) !important; color: var(--kk-primary-dark) !important; border-color: var(--kk-accent) !important; font-weight: 700 !important; } .kk-tf .kk-btn-accent:hover { background: var(--kk-accent-dark) !important; color: var(--kk-primary-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(230, 168, 23, 0.35) !important; } /* ── Section Header ───────────────────────────────────────── */ .kk-tf .kk-section-header { text-align: center !important; margin-bottom: 3rem !important; } .kk-tf .kk-section-header .kk-eyebrow { display: inline-block !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--kk-accent-dark) !important; margin-bottom: 0.75rem !important; } .kk-tf .kk-section-header h2 { font-size: 2rem !important; color: var(--kk-primary) !important; margin-bottom: 1rem !important; } .kk-tf .kk-section-header p { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; color: var(--kk-muted) !important; } .kk-tf .kk-divider { width: 60px !important; height: 4px !important; background: linear-gradient(90deg, var(--kk-primary), var(--kk-accent)) !important; border-radius: 2px !important; margin: 1rem auto !important; } /* ── Footer ───────────────────────────────────────────────── */ .kk-tf .kk-footer { background: #001122 !important; color: rgba(255, 255, 255, 0.8) !important; padding: 4rem 0 0 !important; } .kk-tf .kk-footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 3rem !important; padding-bottom: 3rem !important; } .kk-tf .kk-footer-brand h3 { color: var(--kk-white) !important; font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } .kk-tf .kk-footer-brand p { font-size: 0.875rem !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; } .kk-tf .kk-footer-contact { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .kk-tf .kk-footer-contact-item { display: flex !important; align-items: flex-start !important; gap: 0.5rem !important; font-size: 0.825rem !important; color: rgba(255, 255, 255, 0.55) !important; } .kk-tf .kk-footer-col h4 { color: var(--kk-white) !important; font-size: 0.9rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 1rem !important; } .kk-tf .kk-footer-links { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } .kk-tf .kk-footer-links a { font-size: 0.875rem !important; color: rgba(255, 255, 255, 0.55) !important; transition: var(--kk-transition) !important; } .kk-tf .kk-footer-links a:hover { color: var(--kk-accent) !important; padding-left: 0.25rem !important; } .kk-tf .kk-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 1.5rem 0 !important; text-align: center !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.35) !important; } @media (max-width: 1024px) { .kk-tf .kk-footer-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 768px) { .kk-tf .kk-footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* ── Sticky Navbar ────────────────────────────────────────── */ .kk-tf .kk-navbar { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; background: rgba(0, 33, 68, 0.97) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important; } .kk-tf .kk-navbar-inner { max-width: var(--kk-max-width) !important; margin: 0 auto !important; padding: 0 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; height: 68px !important; } .kk-tf .kk-brand { display: flex !important; align-items: center !important; gap: 0.75rem !important; text-decoration: none !important; flex-shrink: 0 !important; } .kk-tf .kk-brand-logo { width: 42px !important; height: 42px !important; border-radius: 10px !important; background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark)) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 800 !important; font-size: 1rem !important; color: var(--kk-primary-dark) !important; flex-shrink: 0 !important; } .kk-tf .kk-brand-text { display: flex !important; flex-direction: column !important; } .kk-tf .kk-brand-name { font-size: 1rem !important; font-weight: 700 !important; color: var(--kk-white) !important; line-height: 1.2 !important; } .kk-tf .kk-brand-sub { font-size: 0.7rem !important; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; } .kk-tf .kk-nav { display: flex !important; align-items: center !important; gap: 0.25rem !important; } .kk-tf .kk-nav-item { position: relative !important; } .kk-tf .kk-nav-link { display: flex !important; align-items: center !important; gap: 0.3rem !important; padding: 0.5rem 0.875rem !important; font-size: 0.875rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.85) !important; border-radius: var(--kk-radius-sm) !important; transition: var(--kk-transition) !important; white-space: nowrap !important; cursor: pointer !important; position: relative !important; } .kk-tf .kk-nav-link::after { content: '' !important; position: absolute !important; bottom: -2px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: var(--kk-accent) !important; border-radius: 1px !important; transition: width 0.25s ease !important; } .kk-tf .kk-nav-link:hover { color: var(--kk-white) !important; background: rgba(255, 255, 255, 0.1) !important; } .kk-tf .kk-nav-link:hover::after { width: calc(100% - 1.75rem) !important; } .kk-tf .kk-nav-link .kk-chevron { font-size: 0.65rem !important; transition: transform 0.25s ease !important; opacity: 0.7 !important; } .kk-tf .kk-nav-item:hover .kk-chevron { transform: rotate(180deg) !important; } .kk-tf .kk-dropdown { position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(-8px) !important; min-width: 200px !important; background: var(--kk-white) !important; border-radius: var(--kk-radius-md) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06) !important; padding: 0.5rem !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important; } .kk-tf .kk-dropdown::before { content: '' !important; position: absolute !important; top: -6px !important; left: 50% !important; transform: translateX(-50%) !important; width: 12px !important; height: 12px !important; background: var(--kk-white) !important; border-radius: 2px !important; clip-path: polygon(0 100%, 50% 0, 100% 100%) !important; } .kk-tf .kk-nav-item:hover .kk-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .kk-tf .kk-dropdown-item a { display: block !important; padding: 0.6rem 1rem !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--kk-text) !important; border-radius: var(--kk-radius-sm) !important; transition: var(--kk-transition) !important; } .kk-tf .kk-dropdown-item a:hover { background: var(--kk-bg) !important; color: var(--kk-primary) !important; padding-left: 1.25rem !important; } .kk-tf .kk-nav-link.active { color: var(--kk-accent) !important; background: rgba(230, 168, 23, 0.12) !important; } .kk-tf .kk-nav-toggle { display: none !important; flex-direction: column !important; gap: 5px !important; cursor: pointer !important; padding: 8px !important; background: none !important; border: none !important; } .kk-tf .kk-nav-toggle span { display: block !important; width: 24px !important; height: 2px !important; background: var(--kk-white) !important; border-radius: 2px !important; transition: var(--kk-transition) !important; } @media (max-width: 1024px) { .kk-tf .kk-nav-toggle { display: flex !important; } .kk-tf .kk-nav { display: none !important; position: fixed !important; top: 68px !important; left: 0 !important; right: 0 !important; background: var(--kk-primary-dark) !important; flex-direction: column !important; align-items: stretch !important; padding: 1rem !important; gap: 0 !important; max-height: calc(100vh - 68px) !important; overflow-y: auto !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .kk-tf .kk-navbar:focus-within .kk-nav { display: flex !important; } .kk-tf .kk-nav-link { padding: 0.75rem 1rem !important; font-size: 0.95rem !important; } .kk-tf .kk-nav-link::after { display: none !important; } .kk-tf .kk-dropdown { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: var(--kk-radius-sm) !important; padding: 0.25rem 0 !important; margin-top: 0.25rem !important; margin-left: 1rem !important; display: none !important; } .kk-tf .kk-dropdown::before { display: none !important; } .kk-tf .kk-nav-item:hover .kk-dropdown { display: block !important; } .kk-tf .kk-dropdown-item a { color: rgba(255, 255, 255, 0.75) !important; font-size: 0.85rem !important; } .kk-tf .kk-dropdown-item a:hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--kk-white) !important; } } @media (max-width: 768px) { .kk-tf .kk-brand-text { display: none !important; } }

Forge your Future with Frontier Engineering

Discover Your Passion and Explore Multidisciplinary Opportunities in Physics Engineering Programs.

Get Started

About Us

Use this section to describe your company and the services you offer. You could share your company’s story and details about why you are in business. The goal is to create a connection with the visitor and give them confidence to work with you.

Learn more

Our Services

This text briefly introduces visitors to your main services.

Service 1

A short description of the service and how the visitor will benefit from it.

Service 2

A short description of the service and how the visitor will benefit from it.

Service 3

A short description of the service and how the visitor will benefit from it.

Service 4

A short description of the service and how the visitor will benefit from it.

Why Choose Us

benefit 1

A short description of the benefit.

benefit 2

A short description of the benefit.

benefit 3

A short description of the benefit.

benefit 4

A short description of the benefit.

Client Testimonials

“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name
“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name
“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name

A Title to Turn the Visitor Into a Lead

Use this short paragraph to explain how you will deliver this benefit to the visitor if they decide to work with you.
Learn more
  • 123-456-7890
  • 123 Main Street, New York, NY 10001
  • Mon-Fri 9:00AM - 5:00PM
Facebook-f Twitter

© 2022 All Rights Reserved.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Mike Stuart

Head of Sales , Intel

Forge your Future with Frontier Engineering

Welcome To Socialzy

Socalize Your Social Media With Socialzy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius tempor incididunt ut labore et dolore magna aliqua. enim minim veniam, quis nostrud exercitation adispaci
Get Started
Watch Intro
3460+ Satisfied Clients

180+

Brands Joined

85%

Sales Growth

Why Choose Us

Lorem ipsum dolor sit amet, consec adipiscing elit, sed do eiusmod tempor incidiu

Save Your Time

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus neculam

Affordable Price For You

Lorem ipsum dolor sit amet, consectet adipisc elit. Ut elit tellus luctus neculam dolore

Best Strategy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus neculam

85%

Sales Growth

120%

Engagement

About Socialzy

15 Years Of Experiences In Social Media Marekting

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Our Services

We Provide The Best Service For You

Lorem ipsum dolor sit amet, consectetur adipiscin elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua
Our Pricing

The Best Price Just For You

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Personal Plan

Get Started
  • 25 Analytics Campaigns
  • Includes Branded Reports
  • 300 Keywords for SEO
  • 24/7 Customer Support

Enterprise Plan

Get Started
  • 25 Analytics Campaigns
  • Includes Branded Reports
  • 300 Keywords for SEO
  • 15 Social Accounts
  • 24/7 Customer Support

Business Plan

Get Started
  • 25 Analytics Campaigns
  • Includes Branded Reports
  • 300 Keywords for SEO
  • 24/7 Customer Support
Our Projects

Project We Have Done

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
View All Projects
Achievement

Some Number Of Our Achievement

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Read more
Testimonials

What Client Says About Socialzy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Fantastic Job Done by Socialzy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididu ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
Our Blog

Latest Blog & Articles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua