/* ========================================================================== Infinite Context - Static Site CSS Design Tokens + Component Styles ========================================================================== */ /* -------------------------------------------------------------------------- CSS Custom Properties (Design Tokens) -------------------------------------------------------------------------- */:root{/* Colors - Brand */ --color-primary:#00aacc;--color-primary-dark:#006688;--color-secondary:#0095eb;--color-accent:#00d4ff;/* Colors - Neutral */ --color-text:#626262;--color-text-light:#888888;--color-text-dark:#333333;--color-heading:#333333;/* Colors - Background */ --color-bg-white:#ffffff;--color-bg-light:#f7f7f7;--color-bg-grey:#eeeeee;--color-bg-dark:#00445b;--color-bg-footer:#00445b;/* Typography */ --font-primary:"Optima", "Segoe UI", Arial, Tahoma, sans-serif;--font-heading:"Optima", "Segoe UI", Arial, Tahoma, sans-serif;--font-mono:"SF Mono", "Monaco", "Consolas", monospace;/* Font Sizes */ --text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;/* Spacing */ --space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;/* Layout */ --container-max:1200px;--container-narrow:800px;--header-height:80px;/* Borders & Radius */ --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;/* Shadows */ --shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.1);--shadow-lg:0 10px 25px rgba(0, 0, 0, 0.15);--shadow-xl:0 20px 40px rgba(0, 0, 0, 0.2);/* Transitions */ --transition-fast:150ms ease;--transition-base:300ms ease;--transition-slow:500ms ease}/* -------------------------------------------------------------------------- Reset & Base Styles -------------------------------------------------------------------------- */ *, *::before, *::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-primary);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background-color:var(--color-bg-white)}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}/* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6{font-family:var(--font-heading);font-weight:600;color:var(--color-heading);line-height:1.3;margin-bottom:var(--space-md)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin-bottom:var(--space-md)}.lead{font-size:var(--text-lg);color:var(--color-text-light)}/* -------------------------------------------------------------------------- Layout Components -------------------------------------------------------------------------- */ .container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-lg)}.container--narrow{max-width:var(--container-narrow)}.section{padding:var(--space-4xl) 0}.section--grey{background-color:var(--color-bg-grey)}.section--dark{background-color:var(--color-bg-dark);color:var(--color-bg-white)}.section--dark h1, .section--dark h2, .section--dark h3{color:var(--color-bg-white)}/* Grid System */ .grid{display:grid;gap:var(--space-xl)}.grid--2{grid-template-columns:repeat(2, 1fr)}.grid--3{grid-template-columns:repeat(3, 1fr)}.grid--4{grid-template-columns:repeat(4, 1fr)}@media (max-width:992px){.grid--3, .grid--4{grid-template-columns:repeat(2, 1fr)}}@media (max-width:768px){.grid--2, .grid--3, .grid--4{grid-template-columns:1fr}}/* Flexbox Utilities */ .flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}/* -------------------------------------------------------------------------- Header & Navigation -------------------------------------------------------------------------- */ .header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:linear-gradient(to right, #00455C, #006182);box-shadow:none;z-index:1000;transition:box-shadow var(--transition-base)}.header.scrolled{box-shadow:var(--shadow-md)}.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%}.header__logo img{height:50px;width:auto}.nav{display:flex;align-items:center;gap:var(--space-xl)}.nav__list{display:flex;list-style:none;gap:var(--space-lg)}.nav__link{color:#ffffff;font-weight:500;padding:var(--space-sm) 0;position:relative}.nav__link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition-fast)}.nav__link:hover::after, .nav__link.active::after{width:100%}.nav__link:hover{color:var(--color-accent)}/* Language Switcher */ .lang-switch{display:flex;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:rgba(255, 255, 255, 0.15);border-radius:var(--radius-sm)}.lang-switch__link{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);font-weight:500;color:rgba(255, 255, 255, 0.7);border-radius:var(--radius-sm)}.lang-switch__link:hover{color:#ffffff}.lang-switch__link.active{background:var(--color-accent);color:var(--color-bg-dark)}/* Mobile Menu Toggle */ .menu-toggle{display:none;flex-direction:column;gap:5px;padding:var(--space-sm);background:none;border:none;cursor:pointer}.menu-toggle span{width:25px;height:2px;background:#ffffff;transition:var(--transition-fast)}@media (max-width:992px){.menu-toggle{display:flex}.nav__list{position:fixed;top:var(--header-height);left:0;right:0;flex-direction:column;background:#00455C;padding:var(--space-lg);box-shadow:var(--shadow-lg);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition-base)}.nav__list.open{transform:translateY(0);opacity:1;visibility:visible}.nav__list .nav__link{color:#ffffff;padding:var(--space-md) 0;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.nav__list .nav__link:hover{color:var(--color-accent)}}/* -------------------------------------------------------------------------- Hero Section -------------------------------------------------------------------------- */ .hero{position:relative;min-height:70vh;display:flex;align-items:center;background-size:cover;background-position:top;background-repeat:no-repeat;margin-top:var(--header-height)}.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(0, 68, 91, 0.85) 0%, rgba(0, 170, 204, 0.7) 100%)}.hero__content{position:relative;z-index:1;color:white;max-width:700px}.hero__title{font-size:clamp(var(--text-3xl), 5vw, var(--text-5xl));color:white;margin-bottom:var(--space-lg)}.hero__subtitle{font-size:var(--text-xl);opacity:0.9;margin-bottom:var(--space-xl)}/* Hero Home Variant */ .hero--home{min-height:85vh;background-position:center center}.hero--home::before{background:linear-gradient(135deg, rgba(0, 68, 91, 0.6) 0%, rgba(0, 170, 204, 0.4) 100%)}.hero--home .hero__content{max-width:100%;display:flex;flex-direction:column;align-items:center}.hero__logo{margin-bottom:var(--space-xl);max-width:100%;height:auto;align-self:flex-start}.hero--home .hero__title{color:white;font-size:clamp(var(--text-2xl), 4vw, var(--text-4xl));text-align:center;width:100%}.hero--home .hero__subtitle{color:rgba(255, 255, 255, 0.9);text-align:center}/* Dropdown Menu */ .nav__item{position:relative}.nav__dropdown{position:absolute;top:100%;left:0;background:var(--color-bg-white);box-shadow:var(--shadow-md);min-width:220px;padding:var(--space-sm) 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s ease;z-index:1001;list-style:none}.nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}.nav__dropdown li{padding:0}.nav__dropdown a{display:block;padding:var(--space-sm) var(--space-lg);color:var(--color-text-dark);font-size:var(--text-sm);transition:background-color 0.2s}.nav__dropdown a:hover{background-color:var(--color-bg-light);color:var(--color-primary)}/* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-family:var(--font-primary);font-size:var(--text-base);font-weight:600;text-align:center;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn--primary{background:var(--color-primary);color:white}.btn--primary:hover{background:var(--color-primary-dark);color:white}.btn--outline{background:transparent;border-color:white;color:white}.btn--outline:hover{background:white;color:var(--color-primary-dark)}.btn--secondary{background:var(--color-bg-dark);color:white}.btn--secondary:hover{background:var(--color-text-dark);color:white}/* -------------------------------------------------------------------------- Service Cards -------------------------------------------------------------------------- */ .service-card{background:var(--color-bg-white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-base), box-shadow var(--transition-base)}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}.service-card__image{height:200px;background-size:cover;background-position:center}.service-card__content{padding:var(--space-xl)}.service-card__title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.service-card__excerpt{color:var(--color-text-light);margin-bottom:var(--space-lg)}.service-card__link{font-weight:600;display:inline-flex;align-items:center;gap:var(--space-sm)}.service-card__link::after{content:'→';transition:transform var(--transition-fast)}.service-card__link:hover::after{transform:translateX(5px)}/* -------------------------------------------------------------------------- Flat Boxes (Icon Boxes) -------------------------------------------------------------------------- */ .flatbox{text-align:center;padding:var(--space-xl)}.flatbox__icon{width:80px;height:80px;margin:0 auto var(--space-lg);display:flex;align-items:center;justify-content:center;background:var(--color-primary);border-radius:var(--radius-full);color:white;font-size:var(--text-3xl)}.flatbox__title{font-size:var(--text-lg);margin-bottom:var(--space-sm)}.flatbox__text{color:var(--color-text-light);font-size:var(--text-sm)}/* -------------------------------------------------------------------------- Contact Form -------------------------------------------------------------------------- */ .form{max-width:600px}.form__group{margin-bottom:var(--space-lg)}.form__label{display:block;margin-bottom:var(--space-sm);font-weight:500;color:var(--color-text-dark)}.form__input, .form__textarea{width:100%;padding:var(--space-md);font-family:var(--font-primary);font-size:var(--text-base);border:1px solid #ddd;border-radius:var(--radius-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.form__input:focus, .form__textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0, 170, 204, 0.1)}.form__textarea{min-height:150px;resize:vertical}/* Honeypot field - hidden from users */ .form__honeypot{position:absolute;left:-9999px}/* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer{background:var(--color-bg-footer);color:rgba(255, 255, 255, 0.8);padding:var(--space-4xl) 0 var(--space-xl)}.footer a{color:rgba(255, 255, 255, 0.8)}.footer a:hover{color:white}.footer__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-2xl);margin-bottom:var(--space-2xl)}@media (max-width:768px){.footer__grid{grid-template-columns:1fr}}.footer__title{color:white;font-size:var(--text-lg);margin-bottom:var(--space-lg)}.footer__list{list-style:none}.footer__list li{margin-bottom:var(--space-sm)}.footer__contact p{margin-bottom:var(--space-sm);display:flex;align-items:flex-start;gap:var(--space-sm)}.footer__bottom{padding-top:var(--space-xl);border-top:1px solid rgba(255, 255, 255, 0.1);text-align:center;font-size:var(--text-sm)}/* -------------------------------------------------------------------------- Page Header (Subpages) -------------------------------------------------------------------------- */ .page-header{background:linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary-dark) 100%);padding:var(--space-4xl) 0 var(--space-2xl);margin-top:var(--header-height);text-align:center;color:white}.page-header__title{color:white;margin-bottom:var(--space-sm)}.page-header__breadcrumb{font-size:var(--text-sm);opacity:0.8}.page-header__breadcrumb a{color:white;opacity:0.8}.page-header__breadcrumb a:hover{opacity:1}/* -------------------------------------------------------------------------- Content Blocks -------------------------------------------------------------------------- */ .content-block{padding:var(--space-3xl) 0}.content-block--alt{background:var(--color-bg-light)}.content-block__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:center}.content-block__inner--reverse{direction:rtl}.content-block__inner--reverse > *{direction:ltr}@media (max-width:768px){.content-block__inner, .content-block__inner--reverse{grid-template-columns:1fr;direction:ltr}}.content-block__image{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg)}/* -------------------------------------------------------------------------- AI Integration Highlight (New Section) -------------------------------------------------------------------------- */ .ai-highlight{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);color:white;padding:var(--space-3xl);border-radius:var(--radius-lg);margin:var(--space-2xl) 0}.ai-highlight h3{color:white;display:flex;align-items:center;gap:var(--space-md)}.ai-highlight__icon{font-size:var(--text-3xl)}/* -------------------------------------------------------------------------- Utility Classes -------------------------------------------------------------------------- */ .text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-0{margin-top:0}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}.mb-0{margin-bottom:0}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}/* -------------------------------------------------------------------------- Print Styles -------------------------------------------------------------------------- */ @media print{.header, .footer, .nav{display:none}.hero{min-height:auto;padding:var(--space-xl) 0}body{font-size:12pt;color:black}}/* -------------------------------------------------------------------------- Cookie Banner -------------------------------------------------------------------------- */ .cookie-banner{position:fixed;bottom:0;left:0;right:0;background-color:var(--color-bg-dark);color:#fff;padding:var(--space-md) var(--space-lg);z-index:9999;box-shadow:0 -2px 10px rgba(0, 0, 0, 0.2);display:none}.cookie-banner.active{display:block}.cookie-banner__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}.cookie-banner__text{flex:1;font-size:var(--text-sm);line-height:1.5}.cookie-banner__text a{color:var(--color-accent);text-decoration:underline}.cookie-banner__buttons{display:flex;gap:var(--space-sm);flex-shrink:0}.cookie-banner__btn{padding:var(--space-sm) var(--space-lg);border:none;cursor:pointer;font-size:var(--text-sm);font-weight:500;transition:background-color 0.2s}.cookie-banner__btn--accept{background-color:var(--color-primary);color:#fff}.cookie-banner__btn--accept:hover{background-color:var(--color-primary-dark)}.cookie-banner__btn--reject{background-color:transparent;color:#fff;border:1px solid #fff}.cookie-banner__btn--reject:hover{background-color:rgba(255, 255, 255, 0.1)}@media (max-width:768px){.cookie-banner__inner{flex-direction:column;text-align:center}.cookie-banner__buttons{width:100%;justify-content:center}}