/* ========================================================================== Trevel — Ghost theme. Dark-first · Trevel Yellow #FFCB05 · glass-morphism · Inter. Brand tokens are ported from trevel-customer-app/src/theme/tokens.ts and must not diverge — change them there first, then here. The theme previously shipped Material amber #FFC107, which made every gold pixel on the marketing site off-brand against the apps. Yellow is a FILL only: buttons and badges get the fill with --primary-fg text on top. Do not use it as small text on a light ground — #FFCB05 on white is ~1.6:1 and unreadable. ========================================================================== */ :root { --bg: #050505; --fg: #F5F5F5; --card: #1A1A1A; --surface-2: #171717; /* recessed / muted surface (Tarmac) */ --primary: #FFCB05; /* Trevel Yellow — the only brand hue */ --primary-2: #E0A800; /* gradient partner / hover */ --primary-press: #E0A800;/* brand pressed state */ --primary-fg: #0A0A0A; /* Tarmac n-950 — text on the yellow fill */ --primary-tint: #FFF4CC; /* soft brand highlight */ --muted: #A3A3A3; --border: #262626; /* Status / accent tokens — ported from trevel-customer-app/src/theme/tokens.ts (status.*) */ --info: #3B82F6; /* signal blue */ --success: #1FB286; /* trail green */ --warning: #FF8A00; /* detour orange */ --danger: #E5484D; /* stop red */ --purple: #8B5CF6; --pink: #EC4899; --radius: 1rem; --container: 80rem; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--gh-font-body, var(--font)); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Ghost custom fonts (Settings → Design → Typography): use the admin-selected heading/body fonts when set, otherwise fall back to the theme's Inter token. */ h1, h2, h3, h4, h5, h6 { font-family: var(--gh-font-heading, var(--font)); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color .25s ease; } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0; } ::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } @media (min-width: 640px) { .container { padding: 0 48px; } } .section { padding: 32px 0; } @media (min-width: 640px) { .section { padding: 96px 0; } } .bg-card { background: var(--card); } .muted { color: var(--muted); } .eyebrow { color: var(--primary); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; } /* Solid, not a gradient clip — emphasis comes from color and weight, not a sheen. Applied via templates and three CMS default values (package.json); the class name is unchanged so neither needed to move. */ .text-gradient { color: var(--primary); font-weight: 700; } /* Glass ------------------------------------------------------------------ */ .glass { background: rgba(26,26,26,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); } .glass-hover { transition: all .3s ease; } .glass-hover:hover { background: rgba(38,38,38,.8); border-color: color-mix(in srgb, var(--primary) 20%, transparent); transform: translateY(-4px); } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 32px; border-radius: 12px; font-weight: 600; font-size: 16px; cursor: pointer; border: 1px solid transparent; transition: all .2s ease; } .btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 4px 20px rgba(0,0,0,.3); } .btn-primary:hover { background: var(--primary-press); } .btn-primary img { width: 20px; height: 20px; filter: brightness(0); object-fit: contain; } .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(255,255,255,.2); } /* Header ------------------------------------------------------------------ */ .site-head { position: fixed; inset: 24px 0 auto 0; z-index: 50; padding: 0 24px; transition: all .3s ease; } @media (min-width: 640px) { .site-head { padding: 0 32px; } } .site-head .bar { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 16px 24px; border-radius: 16px; background: rgba(26,26,26,.5); backdrop-filter: blur(12px); border: 1px solid var(--border); transition: all .3s ease; } .site-head.scrolled .bar { background: rgba(26,26,26,.6); border-color: rgba(255,255,255,.08); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; } .brand .mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #000; font-weight: 700; } .brand img { width: 120px; height: 36px; object-fit: contain; object-position: left center; } .nav { display: flex; align-items: center; font-size: 14px; font-weight: 500; } .nav .nav-list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav .nav-list li { margin: 0; } .nav .nav-list a { color: var(--muted); } .nav .nav-list a:hover { color: var(--fg); } .nav .nav-list li.nav-current a { color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 4px; } .menu-toggle { display: none; background: rgba(26,26,26,.6); border: 1px solid var(--border); border-radius: 10px; width: 42px; height: 42px; color: var(--fg); font-size: 18px; cursor: pointer; } /* Class-driven, not an inline style: an inline display value outranked the media query, so resizing to desktop with the menu open left it stuck open. */ .mobile-nav { display: none; flex-direction: column; gap: 14px; max-width: var(--container); margin: 16px auto 0; padding: 20px; border-radius: 20px; } .mobile-nav.is-open { display: flex; } @media (min-width: 901px) { .mobile-nav, .mobile-nav.is-open { display: none; } } .mobile-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .mobile-nav a { color: var(--muted); font-weight: 500; } /* Hero -------------------------------------------------------------------- */ .hero { padding: 130px 24px 48px; border-bottom: 1px solid var(--border); } @media (min-width: 640px) { .hero { padding: 170px 48px 80px; } } .hero-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 5fr 7fr; } } .hero-left { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 640px) { .hero-left { gap: 32px; } } .badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); } .hero h1 { font-size: 2.5rem; line-height: 1.1; } @media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } } .hero .lead { font-size: 16px; font-weight: 300; line-height: 1.65; max-width: 32rem; color: var(--muted); } @media (min-width: 640px) { .hero .lead { font-size: 20px; } } .social-proof { display: none; align-items: center; gap: 24px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--border); } @media (min-width: 640px) { .social-proof { display: flex; } } .social-proof img { height: 96px; object-fit: contain; } .social-proof .stars { color: var(--primary); letter-spacing: 2px; } .social-proof p { margin: 2px 0 0; font-size: 14px; color: var(--muted); } /* Bento ------------------------------------------------------------------- */ .bento { position: relative; height: 360px; } @media (min-width: 640px) { .bento { height: 400px; } } @media (min-width: 1024px) { .bento { height: 700px; } } .bento-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; } @media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: 3fr 2fr; gap: 16px; } } .bento-item { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5); cursor: pointer; transition: all .5s ease; } @media (min-width: 1024px) { .bento-item { border-radius: 2.5rem; } } .bento-item:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0,0,0,.65); } .bento-item img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .7s ease; } .bento-item:hover img { transform: scale(1.1); } .bento-item .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 40%, transparent); } .bento-item .cap { position: absolute; bottom: 16px; left: 16px; color: #fff; } @media (min-width: 1024px) { .bento-item .cap { bottom: 24px; left: 24px; } } .bento-item .cap .tag { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: 4px; } .bento-item .cap h3 { font-size: 16px; } @media (min-width: 1024px) { .bento-item .cap h3 { font-size: 20px; } } .b1 { grid-column: span 1; grid-row: span 1; } .b2 { grid-column: span 1; } @media (min-width: 1024px) { .b1 { grid-column: span 4; grid-row: span 2; } .b2 { grid-column: span 8; } .b3 { grid-column: span 4; } .b4 { grid-column: span 4; } } /* Section header ---------------------------------------------------------- */ .sec-head { text-align: center; max-width: 42rem; margin: 0 auto 40px; } .sec-head.left { text-align: left; margin-left: 0; } .sec-head h2 { font-size: 1.875rem; margin-top: 12px; } @media (min-width: 640px) { .sec-head h2 { font-size: 3rem; } .section-head-mb { margin-bottom: 64px; } } .sec-head p { color: var(--muted); font-weight: 300; margin-top: 16px; } /* Services (image cards) -------------------------------------------------- */ .grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-4 { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .svc { position: relative; height: 300px; border-radius: 24px; overflow: hidden; display: block; } @media (min-width: 768px) { .svc { height: 400px; } } .svc img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .svc:hover img { transform: scale(1.05); } .svc .grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2) 40%, transparent); } .svc .body { position: absolute; bottom: 0; padding: 20px; } @media (min-width: 768px) { .svc .body { padding: 32px; } } .svc .ic { width: 48px; height: 48px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); backdrop-filter: blur(8px); display: grid; place-items: center; margin-bottom: 16px; color: var(--primary); font-size: 22px; } .svc h3 { color: #fff; font-size: 24px; margin-bottom: 8px; } .svc p { color: #d1d5db; font-size: 14px; font-weight: 300; margin: 0; } /* Feature cards ----------------------------------------------------------- */ .feat { padding: 20px; border-radius: 24px; } @media (min-width: 640px) { .feat { padding: 32px; } } .feat .ic { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)); border: 1px solid rgba(255,255,255,.05); color: var(--primary); font-size: 22px; } .feat h3 { font-size: 18px; margin-bottom: 12px; } .feat p { font-size: 14px; color: var(--muted); font-weight: 300; margin: 0; } /* Stats ------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .stat { text-align: center; padding: 24px; border-radius: 24px; border: 1px solid rgba(38,38,38,.6); background: rgba(26,26,26,.5); backdrop-filter: blur(4px); transition: all .3s ease; } .stat:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); transform: translateY(-4px); } .stat .ic { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; font-size: 22px; } .stat .num { font-size: 2rem; font-weight: 700; } @media (min-width: 640px) { .stat .num { font-size: 2.25rem; } } .stat .lbl { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 8px; } /* Testimonials ------------------------------------------------------------ */ .tcard { padding: 32px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; } .tcard .ava { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 999px; overflow: hidden; border: 4px solid var(--bg); } .tcard .ava img { width: 100%; height: 100%; object-fit: cover; } .tcard h4 { font-size: 18px; margin-bottom: 4px; } .tcard .role { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; } .tcard .stars { color: var(--primary); letter-spacing: 2px; margin-bottom: 16px; } .tcard blockquote { margin: 0; font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; } .tcard blockquote p { display: inline; margin: 0; } /* Download app ------------------------------------------------------------ */ .dl-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 1024px) { .dl-grid { grid-template-columns: 1fr 1fr; gap: 64px; } } .dl h2 { font-size: 1.875rem; margin-bottom: 16px; } @media (min-width: 640px) { .dl h2 { font-size: 3rem; margin-bottom: 24px; } } .dl p { color: var(--muted); font-weight: 300; margin-bottom: 40px; max-width: 32rem; } .store-btns { display: flex; gap: 16px; } .store-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #000; padding: 12px 20px; border-radius: 12px; transition: opacity .2s; } .store-btn:hover { opacity: .9; } .store-btn img, .store-btn svg { width: 28px; height: 28px; object-fit: contain; } .store-btn .t1 { font-size: 10px; line-height: 1; } .store-btn .t2 { font-size: 16px; font-weight: 600; } .qr { display: none; justify-content: flex-end; } @media (min-width: 1024px) { .qr { display: flex; } } .qr .box { background: #fff; padding: 24px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.4); } .qr .box img { width: 220px; height: 220px; } .qr .box p { text-align: center; color: #000; font-size: 14px; font-weight: 500; margin: 12px 0 0; } /* CTA (full-bleed image) -------------------------------------------------- */ .cta { position: relative; overflow: hidden; padding: 48px 24px; } @media (min-width: 640px) { .cta { padding: 128px 48px; } } .cta .bgimg { position: absolute; inset: 0; } .cta .bgimg img { width: 100%; height: 100%; object-fit: cover; } .cta .bgimg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.7); } .cta .inner { position: relative; max-width: 42rem; margin: 0 auto; text-align: center; } .cta h2 { color: #fff; font-size: 1.5rem; margin-bottom: 24px; } @media (min-width: 640px) { .cta h2 { font-size: 3rem; } } .cta p { color: #d1d5db; font-weight: 300; font-size: 18px; margin-bottom: 40px; } .cta .row { display: flex; flex-direction: column; gap: 16px; justify-content: center; } @media (min-width: 640px) { .cta .row { flex-direction: row; } } /* Post cards -------------------------------------------------------------- */ .blog-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; } .blog-head a { color: var(--primary); font-weight: 600; font-size: 14px; } .post-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; } .post-card .thumb { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; } .post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .post-card:hover .thumb img { transform: scale(1.05); } .post-card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .post-card .meta { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); } .post-card h3 { font-size: 19px; margin: 12px 0 8px; } .post-card p { color: var(--muted); font-size: 14px; font-weight: 300; margin: 0; flex: 1; } .post-card .rt { color: #6b7280; font-size: 12px; margin-top: 16px; } /* Blog / article ---------------------------------------------------------- */ .page-head { padding: 140px 24px 40px; text-align: center; } .page-head h1 { font-size: 2.2rem; } @media(min-width:640px){ .page-head h1{ font-size: 3.2rem; } } .page-head p { color: var(--muted); font-weight: 300; margin-top: 12px; } .pagination { display: flex; justify-content: center; gap: 14px; margin-top: 48px; } .pagination a { border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; color: var(--muted); } .pagination a:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--fg); } .article { max-width: 720px; margin: 0 auto; padding: 140px 24px 80px; } .article-head { text-align: center; margin-bottom: 40px; } .article-head .meta { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); } .article-head h1 { font-size: 2rem; margin: 16px 0; } @media(min-width:640px){ .article-head h1{ font-size:3rem; } } .article-head .sub { color: var(--muted); font-weight: 300; font-size: 18px; } /* Legal / policy pages */ .legal { max-width: 52rem; } .legal h2 { font-size: 1.5rem; margin: 40px 0 14px; } .legal h3 { font-size: 1.15rem; margin: 26px 0 10px; color: var(--primary); } .legal h4 { font-size: 1rem; margin: 22px 0 8px; } .legal p { color: var(--muted); font-weight: 300; line-height: 1.75; margin: 0 0 14px; } .legal ul { margin: 0 0 18px; padding: 0; list-style: none; } .legal li { position: relative; padding-left: 24px; color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 10px; } .legal li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } /* ===== Blog post — 2-column with sidebar (matches trevel.in) ===== */ /* Header is position:fixed at inset-top 24px and ~70px tall, so content must clear ~94px. 24px was leaving the meta row behind the header. */ .post-full { padding: 120px 0 80px; } @media (min-width: 640px) { .post-full { padding-top: 140px; } } .post-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 980px) { .post-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start; } } .post-head { margin-bottom: 24px; } .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 16px; } .post-meta .pm-cat { color: var(--primary); font-weight: 600; } .post-meta .bf-sep { color: color-mix(in srgb, var(--muted) 45%, transparent); } .post-meta .pm-rt::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; } .post-head h1 { font-size: 2rem; line-height: 1.15; color: var(--primary); letter-spacing: -0.01em; } @media (min-width: 640px) { .post-head h1 { font-size: 2.6rem; } } .post-feature { border-radius: 20px; overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/10; background: var(--surface-2); } .post-feature img { width: 100%; height: 100%; object-fit: cover; } .post-lead { font-size: 18px; color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 28px; } .post-content { color: #d7d7d7; font-weight: 300; line-height: 1.8; font-size: 16px; } .post-content p { margin: 0 0 18px; } /* Underline the heading, not the section — a short rule under the text reads as an editorial device; a full-height left bar read as a card tab. */ .post-content h2 { position: relative; color: var(--primary); font-size: 1.5rem; margin: 42px 0 18px; padding-bottom: 12px; } .post-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--primary); border-radius: 2px; } .post-content h3 { color: var(--fg); font-size: 1.2rem; margin: 28px 0 10px; } .post-content h4 { color: var(--fg); font-size: 1.02rem; margin: 22px 0 8px; } .post-content ul, .post-content ol { padding: 0; margin: 0 0 20px; list-style: none; } .post-content li { position: relative; padding-left: 24px; margin-bottom: 10px; } .post-content li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .post-content a { color: var(--primary); text-decoration: underline; } .post-content img { max-width: 100%; border-radius: 14px; margin: 20px 0; } .post-cta { margin-top: 44px; } /* sidebar */ .side-sticky { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 980px) { .side-sticky { position: sticky; top: 96px; } } .side-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px; } .side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin-bottom: 14px; display: block; } .ac-row { display: flex; align-items: center; gap: 12px; } .ac-avatar { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); flex-shrink: 0; } .ac-info { display: flex; flex-direction: column; line-height: 1.35; } .ac-name { color: var(--fg); font-weight: 600; font-size: 15px; } .ac-role { color: var(--muted); font-size: 13px; } .pc-top { display: flex; justify-content: space-between; align-items: center; } .pc-top .side-label { margin-bottom: 0; } .pc-pct { color: var(--primary); font-weight: 700; font-size: 13px; } .pc-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent); margin: 12px 0 10px; overflow: hidden; } /* transform, not width: this updates on every scroll event (see main.js), so animating a layout property here was the highest-frequency case of the three the detector caught. Full-width bar scaled down from the right. */ .pc-bar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--primary); border-radius: 999px; transition: transform .15s ease; } .pc-sub { color: var(--muted); font-size: 12px; } .ac-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; } .ac-meta span { display: inline-flex; align-items: center; gap: 6px; } .ac-meta svg { width: 14px; height: 14px; } .ic-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 9px 0; border-top: 1px solid var(--border); } .ic-row:first-of-type { border-top: none; padding-top: 0; } .ic-row .ic-key { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .ic-row .ic-key svg { width: 15px; height: 15px; color: var(--primary); } .ic-row span:last-child { color: var(--fg); font-weight: 500; } .back-blog { justify-content: center; width: 100%; background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); font-weight: 600; } .back-blog:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); } .article-byline { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; text-align: left; } .article-byline .ab-avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); } .article-byline .ab-info { display: flex; flex-direction: column; line-height: 1.3; } .article-byline .ab-name { color: var(--fg); font-weight: 600; font-size: 15px; } .article-byline .ab-role { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .feature-img { max-width: 1000px; margin: 0 auto 48px; border-radius: 20px; overflow: hidden; } .content { font-size: 18px; line-height: 1.75; color: #E7E7E7; } .content > * { margin: 0 0 1.4em; } .content h2, .content h3 { color: #fff; margin: 1.6em 0 .6em; } .content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .content img { border-radius: 14px; margin: 1.6em auto; } /* A quotation mark carries "this is a quote", matching .quote-card below — not a colored rule down the side. */ .content blockquote { position: relative; padding-left: 36px; color: var(--muted); font-style: italic; } .content blockquote::before { content: '\201C'; position: absolute; left: 0; top: -6px; font-size: 2.4rem; line-height: 1; color: var(--primary); font-family: Georgia, serif; font-style: normal; } .content code { background: #262626; padding: 2px 6px; border-radius: 6px; font-size: .9em; } .content pre { background: #0a0a0a; border: 1px solid var(--border); border-radius: 12px; padding: 18px; overflow-x: auto; } /* Footer ------------------------------------------------------------------ */ .site-foot { border-top: 1px solid var(--border); background: var(--card); padding: 64px 24px 40px; } .site-foot .wrap { max-width: var(--container); margin: 0 auto; } .site-foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; } @media (min-width: 768px) { .site-foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } } .site-foot h4 { font-size: 14px; margin-bottom: 20px; } .site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .site-foot ul a { color: var(--muted); font-size: 14px; } .site-foot ul a:hover { color: var(--primary); } .site-foot .about { color: var(--muted); font-size: 14px; font-weight: 300; max-width: 20rem; margin: 16px 0 0; } .site-foot .bottom { border-top: 1px solid var(--border); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } /* Koenig ------------------------------------------------------------------ */ .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: 1.6em 0; left: 50%; transform: translateX(-50%); } .kg-width-full { position: relative; width: 100vw; margin: 1.6em 0; left: 50%; transform: translateX(-50%); } .kg-card { margin: 1.6em 0; } .kg-bookmark-container { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: inherit; } .kg-bookmark-content { padding: 18px; flex: 1; } /* Responsive nav ---------------------------------------------------------- */ @media (max-width: 900px) { .nav { display: none; } .menu-toggle { display: grid; place-items: center; } .head-cta .btn { display: none; } .bento .b1 { grid-row: span 2; } } /* Stat icon (SVG) --------------------------------------------------------- */ .stat .ic { font-size: 0; } .stat .ic svg { width: 24px; height: 24px; } /* Testimonials carousel --------------------------------------------------- */ .tcarousel { position: relative; max-width: 64rem; margin: 0 auto; } .tviewport { position: relative; z-index: 10; max-width: 32rem; margin: 0 auto; overflow: hidden; } .ttrack { display: flex; transition: transform .5s ease; } .tslide { min-width: 100%; padding: 0 8px; } .tcard { padding: 24px; } @media (min-width: 640px) { .tcard { padding: 48px; } } .tcard .ava { width: 88px; height: 88px; } .tcard blockquote { min-height: 120px; } .bgav { display: none; position: absolute; top: 50%; width: 12rem; height: 20rem; border-radius: 24px; overflow: hidden; object-fit: contain; filter: grayscale(1); box-shadow: 0 10px 30px rgba(0,0,0,.4); pointer-events: none; } @media (min-width: 1024px) { .bgav { display: block; } } .bgav.a { left: 0; transform: translateY(-50%) rotate(-12deg); opacity: .4; } .bgav.b { left: 5rem; transform: translateY(-33%) rotate(6deg); opacity: .6; } .bgav.c { right: 5rem; transform: translateY(-25%) rotate(-6deg); opacity: .6; } .bgav.d { right: 0; transform: translateY(-50%) rotate(12deg); opacity: .4; } .tdots { display: flex; justify-content: center; gap: 12px; margin-top: 32px; min-height: 8px; } @media (min-width: 640px) { .tdots { margin-top: 48px; } } .tdots button { height: 8px; width: 8px; border-radius: 999px; border: none; background: var(--muted); cursor: pointer; padding: 0; transition: all .3s ease; } .tdots button.active { background: var(--primary); width: 32px; } /* Footer extras ----------------------------------------------------------- */ .foot-brand .brand img { height: 32px; } .foot-brand .about { margin: 20px 0; } .socials { display: flex; gap: 16px; margin-bottom: 8px; } .socials a { color: var(--muted); } .socials a:hover { color: var(--primary); } .socials svg { width: 20px; height: 20px; } .foot-contact { margin-top: 24px; } .foot-contact h4 { color: var(--fg); margin-bottom: 12px; } .foot-contact p { display: flex; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 300; line-height: 1.6; margin: 0 0 12px; } .foot-contact p { align-items: flex-start; } .foot-contact p .pin { display: inline-flex; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .foot-contact p .pin svg { width: 15px; height: 15px; } .foot-contact p .ci { display: block; } .foot-contact p .ci strong { display: block; } .foot-contact strong { color: var(--fg); font-weight: 500; } .site-foot ul span { color: var(--muted); font-size: 14px; } .site-foot .bottom .copy { display: flex; flex-direction: column; gap: 2px; } .site-foot .bottom .legal { display: flex; flex-wrap: wrap; gap: 24px; } .site-foot .bottom .legal a:hover { color: var(--primary); } .site-foot .bottom .avail { display: flex; align-items: center; gap: 8px; font-weight: 500; } .site-foot .bottom .avail .d { width: 6px; height: 6px; border-radius: 999px; background: var(--success); } /* ===== Inner pages ===== */ .page-hero { padding: 150px 24px 40px; text-align: center; border-bottom: 1px solid var(--border); position: relative; } @media (min-width: 640px) { .page-hero { padding: 190px 48px 56px; } } .page-hero .eyebrow { display: inline-block; margin-bottom: 14px; } .page-hero h1 { font-size: 2.5rem; } @media (min-width: 640px) { .page-hero h1 { font-size: 4rem; } } .page-hero p { color: var(--muted); font-weight: 300; font-size: 18px; max-width: 40rem; margin: 20px auto 0; } .chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } .chips a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 14px; font-weight: 500; transition: all .2s; } .chips a:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); } /* Services detail */ .svc-list { display: flex; flex-direction: column; gap: 48px; } .svc-detail { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 900px) { .svc-detail { grid-template-columns: 1fr 1fr; gap: 56px; } .svc-detail.reverse .svc-detail-img { order: 2; } } .svc-detail-img { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; } .svc-detail-img img { width: 100%; height: 100%; object-fit: cover; } .svc-detail-body h2 { font-size: 2rem; margin-bottom: 16px; } .svc-detail-body > p { color: var(--muted); font-weight: 300; margin-bottom: 20px; } .ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .ticks li { position: relative; padding-left: 30px; color: #d1d5db; font-size: 15px; } .ticks li::before { content: '\2713'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; } /* Fleet */ .fleet-card { border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: var(--card); transition: border-color .3s ease, transform .3s ease; } .fleet-card:hover { border-color: color-mix(in srgb, var(--primary) 25%, transparent); transform: translateY(-3px); } .fleet-img { aspect-ratio: 16/11; background: var(--surface-2); } .fleet-img img { width: 100%; height: 100%; object-fit: cover; } .fleet-body { padding: 24px; } .fleet-body h3 { font-size: 20px; margin-bottom: 14px; } .fleet-specs { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); font-size: 14px; margin-bottom: 16px; } .fleet-specs span { display: inline-flex; align-items: center; gap: 7px; } .fleet-tags { display: flex; flex-wrap: wrap; gap: 18px; } .fleet-tags span { color: var(--primary); font-size: 14px; font-weight: 500; } /* CTA panel */ .cta-panel { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--border); background: linear-gradient(to bottom, var(--card), var(--bg)); text-align: center; padding: 64px 24px; } .cta-panel h2 { font-size: 2rem; margin-bottom: 14px; } .cta-panel p { color: var(--muted); font-weight: 300; max-width: 34rem; margin: 0 auto 28px; } .cta-panel .cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* About */ .story-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .story-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } } .story-grid h2 { font-size: 2.25rem; margin: 12px 0 20px; } .story-grid p { margin-bottom: 14px; } .story-stats { display: flex; gap: 32px; margin-top: 28px; } .story-stats strong { display: block; font-size: 2rem; color: var(--primary); } .story-stats span { font-size: 13px; color: var(--muted); } .story-right { display: flex; flex-direction: column; gap: 24px; } .story-right .story-stats { margin-top: 0; } .quote-card { border-radius: 24px; padding: 40px; } .quote-card p { font-size: 1.35rem; font-weight: 600; line-height: 1.35; margin: 0 0 8px; letter-spacing: -0.02em; } .founder { border-radius: 24px; padding: 28px; text-align: center; } .founder-img { width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 999px; overflow: hidden; border: 3px solid var(--border); } .founder-img img { width: 100%; height: 100%; object-fit: cover; } .founder h3 { font-size: 20px; } .founder-role { color: var(--primary); font-size: 13px; font-weight: 500; margin: 6px 0 14px; } .founder p { color: var(--muted); font-size: 14px; font-weight: 300; } .founder-li { display: inline-block; margin-top: 16px; color: var(--primary); font-size: 14px; font-weight: 500; } .pillars { display: flex; flex-direction: column; gap: 32px; } .pillar { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } @media (min-width: 900px) { .pillar { grid-template-columns: 1fr 1fr; gap: 48px; } .pillar.reverse .pillar-img { order: 2; } } .pillar-img { border-radius: 24px; overflow: hidden; aspect-ratio: 16/11; } .pillar-img img { width: 100%; height: 100%; object-fit: cover; } .pillar-no { font-size: 3rem; font-weight: 700; color: color-mix(in srgb, var(--primary) 25%, transparent); font-family: var(--font); } .pillar-body h3 { font-size: 1.6rem; margin: 8px 0 16px; } .pillar-body p { color: var(--muted); font-weight: 300; margin-bottom: 12px; } .pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; } .pills span { padding: 8px 18px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 14px; font-weight: 500; } /* ===== Contact (components: booking-form · contact-methods · faq) ===== */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.5fr 1fr; gap: 40px; } } /* booking-form component */ .booking-form { border: 1px solid var(--border); background: var(--card); border-radius: 24px; padding: 28px; } @media (min-width: 640px) { .booking-form { padding: 36px; } } .bf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .bf-head-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: var(--primary-fg); flex-shrink: 0; } .bf-head h3 { font-size: 22px; } .bf-head p { color: var(--muted); font-size: 14px; margin: 2px 0 0; } .bf-grid { display: flex; flex-direction: column; gap: 16px; } .bf-row2, .bf-row3 { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 560px) { .bf-row2 { grid-template-columns: 1fr 1fr; } .bf-row3 { grid-template-columns: 1fr 1fr 1fr; } } .booking-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; } .booking-form input, .booking-form select, .booking-form textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--fg); font-family: inherit; font-size: 14px; width: 100%; } .booking-form input.dt { color-scheme: dark; } .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 50%, transparent); } .bf-note { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 0; } /* Consent notice — DPDP Act 2023 requires this at the point of collection. */ .bf-consent { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .bf-consent p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; } .bf-consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } /* Submit feedback. Empty until the form is used, so it takes no vertical space. */ .bf-status { margin: 12px 0 0; font-size: 13px; text-align: center; } .bf-status:empty { display: none; } .bf-status.success { color: var(--success); } .bf-status.error { color: var(--danger); } .bf-status a { color: var(--primary); text-decoration: underline; } /* contact-methods component */ .contact-methods h2 { font-size: 28px; } .contact-methods .cm-sub { color: var(--muted); font-weight: 300; margin: 8px 0 24px; } .cmethod { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--border); background: var(--card); border-radius: 20px; margin-bottom: 16px; transition: border-color .3s ease, transform .3s ease; } .cmethod:hover { border-color: color-mix(in srgb, var(--primary) 25%, transparent); transform: translateY(-2px); } .cm-ic { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; } .cm-phone { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); } .cm-mail { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } .cm-label { font-size: 15px; font-weight: 600; color: var(--fg); } .cm-value { font-size: 16px; font-weight: 600; color: var(--primary); margin: 2px 0; } .cm-desc { font-size: 13px; color: var(--muted); } .faq { display: flex; flex-direction: column; gap: 12px; } .faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; } .faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } /* Drawn chevron via SVG mask, matching .pm-rt::before / .bf-rt::before in this same file. Was two rotated borders — the classic CSS-triangle trick, which reads to any linter as an accent bar and can't inherit stroke properly. */ .faq summary::after { content: ''; width: 14px; height: 14px; background: var(--muted); flex-shrink: 0; transition: transform .25s ease, background-color .25s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after { transform: rotate(180deg); background: var(--fg); } .faq details[open] summary { color: var(--fg); } .faq details p { padding: 0 20px 20px; margin: 0; color: var(--muted); font-weight: 300; font-size: 15px; line-height: 1.7; } /* Press */ .press-month { font-size: 22px; margin: 40px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .press-list { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .press-list { grid-template-columns: 1fr 1fr; } } .press-item { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; } .pi-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pi-src { color: var(--primary); font-size: 13px; font-weight: 600; } .pi-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .press-item h4 { font-size: 16px; line-height: 1.4; font-weight: 600; } .pi-date { color: var(--muted); font-size: 13px; } /* About — founders (photo-fill cards) */ .founders-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .founders-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } } .founder-card { position: relative; display: block; border-radius: 24px; overflow: hidden; height: 460px; transition: transform .4s ease; } @media (min-width: 1024px) { .founder-card.ftall, .founder-card.fshort { height: 560px; } } .founder-card:hover { transform: translateY(-8px); } .founder-card .founder-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: none; margin: 0; transition: transform .7s ease; } .founder-card:hover .founder-img { transform: scale(1.07); } .founder-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.25) 46%, transparent); } .founder-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; } .founder-info h3 { font-size: 22px; color: #fff; } .founder-info .founder-role { color: var(--primary); font-size: 13px; font-weight: 500; margin: 4px 0 0; } /* Fixed width, scaled from 0 — was animating width itself. transform-origin keeps the reveal growing rightward, matching the old left-anchored line. */ .gold-line { display: block; height: 2px; width: 36px; background: var(--primary); margin: 14px 0; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .founder-card:hover .gold-line { transform: scaleX(1); } /* grid-template-rows 0fr -> 1fr, not max-height: the row size interpolates, so the content clips exactly instead of transitioning through an arbitrary fixed height. Needs the single-child wrapper in founder-cms.hbs for the clip to apply to — grid-row collapse only clips the grid item. */ .founder-bio { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: grid-template-rows .4s ease, opacity .35s ease; } .founder-bio > div { overflow: hidden; min-height: 0; color: #d1d5db; font-size: 13px; font-weight: 300; line-height: 1.6; } .founder-card:hover .founder-bio { grid-template-rows: 1fr; opacity: 1; } .li-btn { display: inline-block; margin-top: 14px; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: all .3s ease; } .founder-card:hover .li-btn { opacity: 1; transform: none; } /* About — pillars (eyebrow + headline + bullets) */ .pillar-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; } .pillar-eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); } .pillar-body h3 { font-size: 1.7rem; margin: 16px 0 0; } @media (min-width: 640px) { .pillar-body h3 { font-size: 2rem; } } .pillar-line { display: block; height: 3px; width: 40px; background: var(--primary); margin: 20px 0; border-radius: 2px; } .pillar-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .pillar-bullets li { position: relative; padding-left: 22px; color: var(--muted); font-weight: 300; line-height: 1.65; } .pillar-bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } /* Blog listing (Trevel Journal) */ .journal-pill { display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); margin-bottom: 20px; } .journal-line { display: block; width: 200px; height: 1px; margin: 28px auto 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 50%, transparent), transparent); } .blog-filter-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 16px; } .blog-filters { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--border); margin-bottom: 40px; } .bf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 14px; font-weight: 500; } .bf-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--fg); } .bf-chip.active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border-color: var(--primary); } .bf-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; } .bf-chip.active .bf-count { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); } .blog-featured-label { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; } .blog-featured { position: relative; display: block; border-radius: 28px; overflow: hidden; background: var(--card); border: 1px solid var(--border); } .blog-featured .bf-img { position: relative; aspect-ratio: 16/9; min-height: 440px; overflow: hidden; } .blog-featured .bf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .blog-featured:hover .bf-img img { transform: scale(1.04); } .blog-featured .bf-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px; background: linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.55) 45%, transparent); } @media (min-width: 640px) { .blog-featured .bf-overlay { padding: 44px; } } .blog-featured .bf-excerpt { color: rgba(255,255,255,.82); font-weight: 300; margin-bottom: 20px; max-width: 46rem; } .bf-meta { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 13px; margin-bottom: 16px; } .bf-meta .bf-sep { color: rgba(255,255,255,.35); } .bf-meta .bf-rt::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; } .blog-featured .link-more { color: var(--primary); } /* Category-tinted filter chips */ .bf-chip[data-cat="safety"] { --chip: var(--danger); } .bf-chip[data-cat="sustainability"] { --chip: var(--success); } .bf-chip[data-cat] { border-color: color-mix(in srgb, var(--chip) 40%, transparent); } .bf-chip[data-cat] svg { color: var(--chip); } .bf-chip[data-cat] .bf-count { background: color-mix(in srgb, var(--chip) 18%, transparent); color: var(--chip); } .bf-tag { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); padding: 4px 12px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } .blog-featured h2 { font-size: 1.9rem; color: #fff; margin-bottom: 12px; } @media (min-width: 640px) { .blog-featured h2 { font-size: 2.4rem; } } .blog-featured p { color: var(--muted); font-weight: 300; margin-bottom: 18px; max-width: 44rem; } /* ===== Press Room (redesigned) ===== */ .press-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 20px; background: var(--card); margin-bottom: 24px; box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 10%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent); } .pf-btn svg { width: 15px; height: 15px; } .pi-date svg { width: 14px; height: 14px; vertical-align: -2px; } .press-month .pm-ic svg { width: 20px; height: 20px; color: var(--primary); } .pf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: none; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .2s; } .pf-btn:hover { color: var(--fg); background: rgba(255,255,255,.04); } .pf-btn.active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid var(--primary); } .pf-c { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; } .pf-btn.active .pf-c { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); } .month-group { margin-bottom: 8px; } .press-month { display: flex; align-items: center; gap: 14px; margin: 32px 0 24px; padding: 0; border: none; font-size: 22px; } .press-month .pm-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, transparent); font-size: 18px; flex-shrink: 0; } .press-month > span:nth-child(2) { font-weight: 600; } .press-month .pm-count { color: var(--muted); font-size: 14px; font-weight: 400; } .press-month::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .press-list { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .press-list { grid-template-columns: 1fr 1fr; } } .press-item { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); transition: border-color .3s ease, transform .3s ease; } .press-item:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); transform: translateY(-3px); } .pi-top { display: flex; align-items: center; gap: 10px; } .pi-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px; border: 1px solid; border-color: color-mix(in srgb, currentColor 45%, transparent); } .pi-src { color: var(--muted); font-size: 13px; font-weight: 500; } .press-item h4 { font-size: 17px; line-height: 1.4; font-weight: 600; flex: 1; } .pi-bottom { display: flex; align-items: center; justify-content: space-between; } .pi-date { color: var(--muted); font-size: 13px; } .pi-read { color: var(--primary); font-size: 13px; font-weight: 600; } .press-empty { display: none; text-align: center; color: var(--muted); padding: 48px 0; font-size: 15px; } .badge-video { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); } .badge-pr { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); } .badge-ind { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .badge-art { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); } .badge-int { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); } /* CMS press category badges (keyed by tag slug) */ .badge-press-release { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); } .badge-industry { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); } .badge-article { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); } .badge-interview { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--pink); } /* ===== Audit-sync components ===== */ /* Shared "more" link */ .link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 14px; transition: gap .2s ease; } .link-more:hover { gap: 10px; } /* Services hero pill badge + chip icons */ .pill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 16px; } .pill-badge svg { width: 14px; height: 14px; } .chips a { display: inline-flex; align-items: center; gap: 8px; } .chips a svg { width: 16px; height: 16px; } /* Service-row circular icon badge */ .svc-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-bottom: 18px; } .svc-ic svg { width: 26px; height: 26px; } /* Home: View-all row + QR platform badges */ .svc-head-row { display: flex; justify-content: flex-end; margin-bottom: 20px; } .qr-plats { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #6b7280; } /* Blog: filter icons, latest heading, card overlays */ .blog-filter-label { display: inline-flex; align-items: center; gap: 8px; } .blog-filter-label svg { width: 15px; height: 15px; } .bf-chip svg { width: 15px; height: 15px; } .latest-head { display: flex; align-items: center; gap: 10px; margin-top: 48px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); } .latest-head svg { width: 16px; height: 16px; } .post-card { border: 1px solid var(--border); background: var(--card); } .post-card .thumb { position: relative; } .pc-tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: var(--primary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; } .pc-rt { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 999px; } .post-card .meta { display: flex; align-items: center; gap: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); } .post-card .meta svg { width: 14px; height: 14px; flex-shrink: 0; } .post-card .link-more { margin-top: 16px; } /* Contact: emergency CTA */ .emergency-cta { text-align: center; max-width: 40rem; margin: 0 auto; } .emg-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); margin: 0 auto 20px; } .emg-ic svg { width: 30px; height: 30px; } .emergency-cta h2 { font-size: 2rem; margin-bottom: 12px; } .emergency-cta p { color: var(--muted); font-weight: 300; margin-bottom: 24px; } .page-hero .eyebrow strong, .page-hero p strong { color: var(--fg); font-weight: 600; } /* About page sync */ .founder-card { border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); } /* Dot per line, no connecting rail — three founding-story lines aren't a timeline, so a spine down the side asserted a sequence that isn't there. */ .story-list { list-style: none; padding: 0; margin: 0 0 8px; } .story-list li { position: relative; padding: 0 0 16px 22px; color: var(--muted); font-weight: 300; line-height: 1.7; } .story-list li::before { content: ''; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .story-list strong { color: var(--fg); font-weight: 600; } .story-stats { display: flex; gap: 16px; margin-top: 28px; } .story-stats > div { flex: 1; text-align: center; padding: 18px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); } /* The oversized quotation mark is the accent — an even border plus the glyph carries "this is a quote" without a heavier bar down one side. */ .quote-card { border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); position: relative; } .quote-card::before { content: '\201C'; position: absolute; top: 2px; left: 24px; font-size: 100px; line-height: 1; color: var(--primary); font-family: Georgia, serif; } .quote-card p:first-of-type { margin-top: 44px; } .promise-grid .feat { text-align: center; } .promise-grid .feat .ic { margin-left: auto; margin-right: auto; } .promise-grid .feat .ic svg { width: 24px; height: 24px; } /* ── Breadcrumbs ─────────────────────────────────────────────────────── */ .breadcrumbs { margin: 0 0 20px; font-size: .8rem; letter-spacing: .02em; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--muted); } .breadcrumbs li + li::before { content: '/'; color: var(--border); } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs [aria-current="page"] { color: var(--fg); max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-head .breadcrumbs { margin-bottom: 14px; } /* ── Newsletter capture ──────────────────────────────────────────────── */ .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; } .newsletter { margin: 56px 0 8px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-2); overflow: hidden; } .nl-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 40px; } .nl-copy h2 { margin: 10px 0 8px; font-size: 1.7rem; } .nl-copy p { margin: 0; color: var(--muted); font-size: .95rem; } .nl-form { display: flex; flex-wrap: wrap; gap: 12px; } .nl-form input { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: .95rem; } .nl-form input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; } .nl-form button { flex: 0 0 auto; } .nl-msg { flex: 1 0 100%; margin: 0; font-size: .85rem; display: none; } .nl-success { color: var(--success); } .nl-error { color: #ff6b6b; } .success .nl-success, .error .nl-error { display: block; } @media (max-width: 860px) { .nl-inner { grid-template-columns: 1fr; padding: 28px; } } .page-feature { display: block; width: 100%; border-radius: 20px; margin-bottom: 8px; } /* Ghost editor button cards (kg-btn) — match the theme's primary button: gold background with dark, readable text instead of Ghost's default white. */ .kg-btn-accent { background: var(--primary); color: var(--primary-fg); font-weight: 600; border-radius: 12px; padding: 12px 26px; } .kg-btn-accent:hover { background: var(--primary-2); color: var(--primary-fg); } .founder-bio p { margin: 0; } .post-feature figcaption, .page-feature + figcaption { margin-top: 10px; font-size: 14px; color: var(--muted, #8a8a8a); text-align: center; } /* Pillar bullets now come from post {{content}} (a