/* ============================================================ GLOBAL.CSS — AntarcticaCompared Design System Tokens from DESIGN.md — Expedition Editorial theme ============================================================ */ /* --- Google Fonts loaded via --- */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Primary palette */ --color-primary: #003567; --color-primary-container: #0F4C8A; --color-on-primary: #ffffff; /* Secondary — Aurora green */ --color-aurora: #1A6B4A; --color-aurora-light: #A5F3C9; --color-on-aurora: #ffffff; /* Tertiary — Quark orange/red */ --color-quark: #C2410C; --color-quark-dark: #8B2900; --color-quark-bg: #7C2D12; /* Surfaces */ --color-bg: #F9F9FF; --color-surface: #ffffff; --color-surface-low: #F1F3FF; --color-surface-container: #E9EDFF; --color-surface-variant: #DCE2F7; --color-surface-dim: #D3DAEF; /* Text */ --color-text: #141B2B; --color-text-muted: #424750; --color-text-subtle: #727781; /* Borders */ --color-border: #C2C6D2; --color-border-subtle: #727781; /* Status badges */ --color-included-bg: #DCFCE7; --color-included-text: #166534; --color-extra-bg: #FEF3C7; --color-extra-text: #92400E; --color-unavail-bg: #F3F4F6; --color-unavail-text: #6B7280; /* Callout backgrounds */ --color-callout-blue: #EFF6FF; --color-callout-amber: #FFFBEB; --color-callout-green: #F0FDF4; /* Typography */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Layout */ --max-width: 1160px; --gutter: 24px; /* Spacing scale (4px baseline) */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 48px; --sp-section: 80px; /* Border radius */ --radius-sm: 2px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Transitions */ --transition: 200ms ease; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--color-primary-container); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--transition); } a:hover { text-decoration-color: currentColor; } ul, ol { list-style: none; } /* ============================================================ LAYOUT — CONTAINERS ============================================================ */ .container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); } /* ============================================================ TYPOGRAPHY SCALE ============================================================ */ h1, .h1 { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text); } h2, .h2 { font-family: var(--font-serif); font-size: clamp(24px, 3.5vw, 30px); font-weight: 600; line-height: 1.3; color: var(--color-text); } h3, .h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--color-text); } h4, .h4 { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--color-text); } p { line-height: 1.7; } .text-mono { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .label-caps { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* ============================================================ HEADER & NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 400; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 8px rgba(0,0,0,.06); overflow: visible; } .site-header .container { height: 64px; display: flex; align-items: center; gap: var(--sp-lg); } .site-logo { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .site-logo:hover { color: var(--color-primary-container); text-decoration: none; } .site-nav { display: flex; align-items: center; gap: var(--sp-sm); flex: 1; } .site-nav__list { display: none; align-items: center; gap: var(--sp-xs); flex: 1; } .site-nav__item { position: relative; } .site-nav__link { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-md); transition: background var(--transition), color var(--transition); white-space: nowrap; display: block; } .site-nav__link:hover, .site-nav__link.active { color: var(--color-primary); background: var(--color-surface-low); text-decoration: none; } .site-nav__link.active { font-weight: 600; } /* Dropdown */ .site-nav__item--dropdown { position: relative; } /* Dropdown trigger: flex so chevron stays right of text */ .site-nav__item--dropdown > a.site-nav__link { display: flex; align-items: center; gap: 4px; } .site-nav__dropdown { position: absolute; top: calc(100% + 4px); left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 500; } .site-nav__item--dropdown:hover .site-nav__dropdown, .site-nav__item--dropdown:focus-within .site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__dropdown a { display: block; padding: var(--sp-sm) var(--sp-md); font-size: 14px; color: var(--color-text-muted); text-decoration: none; transition: background var(--transition), color var(--transition); } .site-nav__dropdown a:hover { background: var(--color-surface-low); color: var(--color-primary); } .site-nav__dropdown a:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .site-nav__dropdown a:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Nav CTAs */ .site-nav__ctas { display: none; align-items: center; gap: var(--sp-sm); margin-left: auto; } /* Hamburger */ .nav-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--color-text); margin-left: auto; transition: background var(--transition); } .nav-toggle:hover { background: var(--color-surface-low); } /* Mobile nav open state */ .site-nav.is-open .site-nav__list { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 64px; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: var(--sp-md); gap: var(--sp-xs); z-index: 99; } .site-nav.is-open .site-nav__ctas { display: flex; flex-direction: column; width: 100%; padding: var(--sp-sm) var(--sp-md) var(--sp-md); position: absolute; top: auto; } /* Desktop nav */ @media (min-width: 1024px) { .nav-toggle { display: none; } .site-nav__list { display: flex; } .site-nav__ctas { display: flex; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 600; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary-container); color: var(--color-on-primary); border-color: var(--color-primary-container); padding: 10px 20px; } .btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-outline { background: transparent; color: var(--color-primary-container); border-color: var(--color-primary-container); padding: 10px 20px; } .btn-outline:hover { background: var(--color-primary-container); color: #fff; } .btn-sm { font-size: 13px; padding: 7px 14px; } .btn-xs { font-size: 12px; padding: 5px 10px; } .btn-lg { font-size: 17px; padding: 14px 28px; } /* ============================================================ BADGES / STATUS CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap; } .badge--included { background: var(--color-included-bg); color: var(--color-included-text); } .badge--extra { background: var(--color-extra-bg); color: var(--color-extra-text); } .badge--unavail { background: var(--color-unavail-bg); color: var(--color-unavail-text); } .badge--neutral { background: var(--color-surface-container); color: var(--color-text-muted); } .meta-badge { display: inline-flex; align-items: center; gap: var(--sp-xs); font-family: var(--font-sans); font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.15); color: rgba(255,255,255,.95); } /* ============================================================ CALLOUT BOXES ============================================================ */ .callout { border-left: 4px solid; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--sp-lg); margin-block: var(--sp-xl); } .callout--blue { background: var(--color-callout-blue); border-color: var(--color-primary-container); } .callout--amber { background: var(--color-callout-amber); border-color: #D97706; } .callout--green { background: var(--color-callout-green); border-color: var(--color-aurora); } .callout--navy { background: var(--color-surface-container); border-color: var(--color-primary); } .callout__title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--sp-sm); } .callout p + p { margin-top: var(--sp-sm); } /* ============================================================ STAT TILES ============================================================ */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-md); margin-block: var(--sp-xl); } .stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); text-align: center; } .stat-tile__icon { margin-inline: auto; margin-bottom: var(--sp-sm); color: var(--color-primary-container); } .stat-tile__value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--color-primary); line-height: 1.1; margin-bottom: var(--sp-xs); } .stat-tile__label { font-size: 13px; color: var(--color-text-muted); line-height: 1.4; } /* ============================================================ COMPARISON GRID TABLE (CSS Grid — not HTML table) ============================================================ */ .cg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-block: var(--sp-xl); } .cg-table { display: grid; min-width: 560px; width: 100%; } .cg-table--3col .cg-row { grid-template-columns: 2fr 1.5fr 1.5fr; } .cg-table--2col .cg-row { grid-template-columns: 2fr 2fr; } .cg-table--4col .cg-row { grid-template-columns: 2fr 1fr 1fr 1fr; } .cg-table--5col .cg-row { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } .cg-row { display: grid; border-bottom: 1px solid var(--color-border); } .cg-row:last-child { border-bottom: none; } .cg-row--head .cg-cell { background: var(--color-primary); color: #fff; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .cg-row:nth-child(even):not(.cg-row--head) .cg-cell { background: var(--color-bg); } .cg-cell { padding: 12px 16px; font-size: 14px; color: var(--color-text); border-right: 1px solid var(--color-border); vertical-align: middle; display: flex; align-items: center; } .cg-cell:last-child { border-right: none; } .cg-cell--attr { font-weight: 500; color: var(--color-text-muted); font-size: 13px; } .cg-cell--mono { font-family: var(--font-mono); font-size: 13px; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-list { margin-block: var(--sp-xl); } .faq-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--sp-sm); overflow: hidden; transition: box-shadow var(--transition); } .faq-list details[open] { box-shadow: 0 2px 12px rgba(0,0,0,.06); } .faq-list summary { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--color-text); padding: var(--sp-md) var(--sp-lg); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); user-select: none; transition: background var(--transition); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary:hover { background: var(--color-surface-low); } .faq-list summary::after { content: ''; width: 20px; height: 20px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23424750' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform var(--transition); } .faq-list details[open] summary::after { transform: rotate(180deg); } .faq-list details > *:not(summary) { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); font-size: 16px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); line-height: 1.7; } .faq-list details > *:not(summary) p + p { margin-top: var(--sp-sm); } /* ============================================================ SECTION SPACING ============================================================ */ .section { padding-block: var(--sp-section); } .section--sm { padding-block: var(--sp-xl); } .section--lg { padding-block: calc(var(--sp-section) * 1.5); } .section--surface { background: var(--color-surface-low); } .section--dark { background: var(--color-primary); color: #fff; } .section--dark h2, .section--dark h3 { color: #fff; } .section--navy-dark { background: var(--color-primary-container); color: #fff; } .section__header { margin-bottom: var(--sp-xl); } .section__eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary-container); margin-bottom: var(--sp-sm); display: block; } .section__header p { margin-top: var(--sp-md); font-size: 18px; color: var(--color-text-muted); max-width: 620px; } /* ============================================================ AUTHOR BLOCK ============================================================ */ .author-block { display: flex; align-items: flex-start; gap: var(--sp-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); margin-block: var(--sp-xl); } .author-block img { width: 72px; height: 72px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--color-surface-dim); } .author-block__name { font-weight: 700; color: var(--color-text); display: block; margin-bottom: 2px; } .author-block__role { font-size: 13px; color: var(--color-text-muted); display: block; margin-bottom: var(--sp-sm); } .author-block p { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; } .author-block small { font-size: 13px; color: var(--color-text-subtle); margin-top: var(--sp-xs); display: block; } /* ============================================================ BREADCRUMBS ============================================================ */ .breadcrumbs { padding-block: var(--sp-md); border-bottom: 1px solid var(--color-border); } .breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-xs); list-style: none; } .breadcrumbs li { display: flex; align-items: center; gap: var(--sp-xs); font-size: 13px; color: var(--color-text-muted); } .breadcrumbs li + li::before { content: '/'; color: var(--color-border-subtle); } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs li:last-child { color: var(--color-text); font-weight: 500; } .breadcrumbs + .section { padding-top: 1.25rem; } /* ============================================================ HERO (base — page-specific styles extend this) ============================================================ */ .hero { position: relative; background: var(--color-primary-container); color: #fff; padding-block: var(--sp-section); overflow: hidden; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; z-index: 0; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,76,138,.65) 0%, rgba(0,53,103,.8) 100%); z-index: 1; } .hero__content { position: relative; z-index: 2; } .hero h1 { color: #fff; margin-bottom: var(--sp-md); } .hero__sub { font-size: 18px; opacity: .9; max-width: 640px; line-height: 1.6; margin-bottom: var(--sp-lg); } .hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-lg); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-sm); } /* Text-only hero with background image */ .hero--image { background-image: url('/images/antarctica/landscape-horizon.webp') !important; background-size: cover !important; background-position: center !important; } .hero--image::before { content: ''; position: absolute; inset: 0; background: rgba(15, 76, 138, 0.82); z-index: 0; } .hero--image > * { position: relative; z-index: 1; } /* Buttons inside hero need white treatment for visibility on dark overlays */ .hero .btn-primary { background: #fff; color: var(--color-primary); border-color: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.22); } .hero .btn-primary:hover { background: rgba(255,255,255,.92); border-color: #fff; color: var(--color-primary); } .hero .btn-outline { color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); } .hero .btn-outline:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; } /* ============================================================ RELATED CARDS ============================================================ */ .related-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-lg); } .related-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-lg); text-decoration: none; color: var(--color-text); transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; gap: var(--sp-sm); } .related-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); transform: translateY(-2px); text-decoration: none; } .related-card--coming .related-card__link { color: var(--color-text-subtle); } .related-card__type { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary-container); } .related-card__title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.4; } .related-card__arrow { margin-top: auto; font-size: 13px; color: var(--color-primary-container); } .related-card--disabled { opacity: 0.6; pointer-events: none; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #0F172A; color: #94A3B8; padding-block: var(--sp-section); margin-top: auto; } .site-footer a { color: #94A3B8; text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); margin-bottom: var(--sp-xl); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-logo { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #fff; display: block; margin-bottom: var(--sp-sm); text-decoration: none; } .footer-col__title { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-md); display: block; } .footer-col p { font-size: 14px; line-height: 1.7; } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); } .footer-col ul li a { font-size: 14px; } .footer-disclaimer { border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--sp-lg); font-size: 13px; line-height: 1.6; } .footer-credit { margin-top: var(--sp-md); font-size: 12px; color: #64748B; } /* ============================================================ RATING STARS ============================================================ */ .stars { display: inline-flex; gap: 2px; align-items: center; } .stars__score { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color-text-muted); margin-left: var(--sp-xs); } /* ============================================================ UTILITY CLASSES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-right { text-align: right; } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } .mt-xl { margin-top: var(--sp-xl); } .mb-md { margin-bottom: var(--sp-md); } .mb-lg { margin-bottom: var(--sp-lg); } .mb-xl { margin-bottom: var(--sp-xl); } .gap-sm { gap: var(--sp-sm); } .flex { display: flex; align-items: center; gap: var(--sp-sm); } .flex-wrap { flex-wrap: wrap; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-lg); } .prose p + p { margin-top: var(--sp-md); } .prose h2, .prose h3 { margin-top: var(--sp-xl); margin-bottom: var(--sp-md); } .prose ul { list-style: disc; padding-left: var(--sp-lg); } .prose ul li { margin-bottom: var(--sp-xs); line-height: 1.7; } .prose a { color: var(--color-primary-container); }