/* ========================================================================= Site skin — puts the inner pages in the active homepage design. site/layout/app.blade.php loads this after zulk.css and the design's own stylesheet whenever the live design has a `shell` (config/limo.php), and gives the design's class plus `sk`. The homeN shells load it too, for the footer and floating buttons, but never add `sk`. 1. Tokens — one block per design, on the design's own body class, so they exist on its homepage as well as its inner pages. 2. Footer and floating buttons — every page of a skinned design. 3. Inner pages (`.sk`) — zulk's variables re-pointed at the tokens, then the colours zulk hard-codes (hairlines, dark panel gradients, gold button fills) patched to read from the same tokens. 4. Page header — each design's signature band behind the page title. The classic design has no shell, loads none of this, and is unchanged. Adding a design: add a token block and a page-header block. ========================================================================= */ /* ---------------------------------------------------------------- tokens */ /* Daylight — warm cream, sunset gradient, deep-ink labels on the fills. */ body.h6-page{ --sk-scheme:light; --sk-bg:#FFF9F2; --sk-bg2:#FFF2E4; --sk-surface:#FFFFFF; --sk-field:#FFFFFF; --sk-text:#2A1F1A; --sk-text2:#4A3B33; --sk-mut:#6E5A4C; --sk-hair:rgba(122,74,44,.14); --sk-line:rgba(196,54,43,.24); --sk-accent:#B8342A; --sk-accent-2:#FF7A50; --sk-tint:rgba(255,122,80,.10); --sk-btn:linear-gradient(100deg,#FF6B6B 0%,#FFA94D 52%,#D3A94F 100%); --sk-btn-ink:#2A1F1A; --sk-btn-glow:0 16px 40px rgba(255,122,80,.30); --sk-shadow:0 2px 6px rgba(90,52,30,.06),0 14px 30px rgba(90,52,30,.09); --sk-shadow-lg:0 8px 20px rgba(90,52,30,.08),0 30px 64px rgba(90,52,30,.14); --sk-display:'Marcellus',Georgia,serif; --sk-display-w:400; --sk-body:'Jost',system-ui,sans-serif; --sk-r:20px; --sk-btn-r:999px; --sk-head-ink:#2A1F1A; --sk-head-mut:#6E5A4C; --sk-head-accent:#B8342A; --sk-foot-bg:#2A1F1A; --sk-foot-ink:#F6EDE3; --sk-foot-mut:#C9B8A8; --sk-foot-accent:#FFA94D; } /* Obsidian Atelier — obsidian bands, pearl pages, champagne. */ body.h7-page{ --sk-scheme:light; --sk-bg:#F7F3EB; --sk-bg2:#EFE8DB; --sk-surface:#FFFFFF; --sk-field:#FFFFFF; --sk-text:#1A1A1E; --sk-text2:#3A3A42; --sk-mut:#62666F; --sk-hair:rgba(26,26,30,.10); --sk-line:rgba(196,154,74,.38); --sk-accent:#8C6A2C; --sk-accent-2:#D4AF6A; --sk-tint:rgba(212,175,106,.13); --sk-btn:linear-gradient(135deg,#E8D4A8,#C49A4A); --sk-btn-ink:#141006; --sk-btn-glow:0 12px 32px rgba(196,154,74,.28); --sk-shadow:0 1px 2px rgba(26,26,30,.05),0 14px 34px rgba(26,26,30,.08); --sk-shadow-lg:0 30px 70px rgba(26,26,30,.16); --sk-display:'Cormorant Garamond',Georgia,serif; --sk-display-w:500; --sk-body:'Outfit',system-ui,sans-serif; --sk-r:20px; --sk-btn-r:999px; --sk-head-ink:#F7F3EB; --sk-head-mut:#A9ADB5; --sk-head-accent:#D4AF6A; --sk-foot-bg:#101014; --sk-foot-ink:#F7F3EB; --sk-foot-mut:#8B9099; --sk-foot-accent:#D4AF6A; } /* White Gold — white paper, metallic gold, ink type. */ body.h8-page{ --sk-scheme:light; --sk-bg:#FFFFFF; --sk-bg2:#F6F5F2; --sk-surface:#FFFFFF; --sk-field:#FBFAF7; --sk-text:#12100C; --sk-text2:#3D3A33; --sk-mut:#6A6862; --sk-hair:rgba(18,16,12,.09); --sk-line:rgba(201,162,39,.34); --sk-accent:#7A6214; --sk-accent-2:#C9A227; --sk-tint:rgba(201,162,39,.10); --sk-btn:linear-gradient(135deg,#F5E6C0 0%,#E8C547 38%,#C9A227 72%,#A8841F 100%); --sk-btn-ink:#161006; --sk-btn-glow:0 12px 32px rgba(201,162,39,.34); --sk-shadow:0 16px 40px rgba(18,16,12,.07); --sk-shadow-lg:0 28px 70px rgba(18,16,12,.12); --sk-display:'Marcellus',Georgia,serif; --sk-display-w:400; --sk-body:'Jost',system-ui,sans-serif; --sk-r:20px; --sk-btn-r:999px; --sk-head-ink:#12100C; --sk-head-mut:#6A6862; --sk-head-accent:#7A6214; --sk-foot-bg:#12100C; --sk-foot-ink:#F3EFE6; --sk-foot-mut:#A5A29A; --sk-foot-accent:#E8C547; } /* Showroom — cool studio white, navy type, bronze-gold. */ body.h9{ --sk-scheme:light; --sk-bg:#F5F7FA; --sk-bg2:#ECF0F5; --sk-surface:#FFFFFF; --sk-field:#FFFFFF; --sk-text:#0F1B2D; --sk-text2:#34405A; --sk-mut:#58647A; --sk-hair:rgba(15,27,45,.10); --sk-line:rgba(176,141,74,.38); --sk-accent:#8A6A2E; --sk-accent-2:#B08D4A; --sk-tint:rgba(176,141,74,.11); --sk-btn:linear-gradient(135deg,#C9A45C,#9C7630); --sk-btn-ink:#FFFFFF; --sk-btn-glow:0 10px 24px -10px rgba(138,106,46,.7); --sk-shadow:0 1px 2px rgba(15,27,45,.05),0 12px 32px -12px rgba(15,27,45,.18); --sk-shadow-lg:0 30px 60px -30px rgba(15,27,45,.35); --sk-display:'Marcellus',Georgia,serif; --sk-display-w:400; --sk-body:'Figtree','Segoe UI',system-ui,sans-serif; --sk-r:20px; --sk-btn-r:999px; --sk-head-ink:#0F1B2D; --sk-head-mut:#58647A; --sk-head-accent:#8A6A2E; --sk-foot-bg:#0F1B2D; --sk-foot-ink:#EEF2F7; --sk-foot-mut:#9AA6B8; --sk-foot-accent:#C9A45C; } /* Night Drive — harbour-night navy, champagne, square deco edges. */ body.h10{ --sk-scheme:dark; --sk-bg:#0B1422; --sk-bg2:#0E1A2B; --sk-surface:#111D2F; --sk-field:rgba(239,232,216,.04); --sk-text:#EFE8D8; --sk-text2:#C3C8D2; --sk-mut:#93A0B4; --sk-hair:rgba(239,232,216,.09); --sk-line:rgba(221,190,130,.26); --sk-accent:#DDBE82; --sk-accent-2:#DDBE82; --sk-tint:rgba(221,190,130,.10); --sk-btn:#DDBE82; --sk-btn-ink:#0B1422; --sk-btn-glow:none; --sk-shadow:0 18px 40px -18px rgba(0,0,0,.6); --sk-shadow-lg:0 30px 70px -20px rgba(0,0,0,.7); --sk-display:'Poiret One','Didot',Georgia,serif; --sk-display-w:400; --sk-body:'Jost',system-ui,sans-serif; --sk-r:4px; --sk-btn-r:2px; --sk-head-ink:#EFE8D8; --sk-head-mut:#93A0B4; --sk-head-accent:#DDBE82; --sk-foot-bg:#08101B; --sk-foot-ink:#EFE8D8; --sk-foot-mut:#93A0B4; --sk-foot-accent:#DDBE82; } /* ------------------------------------------- footer + floating buttons */ :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot{ background:var(--sk-foot-bg);border-top:1px solid var(--sk-line); font-family:var(--sk-body); } :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot h3{ font-family:var(--sk-display);font-weight:var(--sk-display-w); font-size:1.05rem;line-height:1.3;margin-bottom:20px;color:var(--sk-foot-accent); } :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot :is(p,li){color:var(--sk-foot-mut)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot p{margin:0 0 12px} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot li a:hover, :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot__contact a:hover{color:var(--sk-foot-accent)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot__contact a{color:var(--sk-foot-ink)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-foot__bar{border-top-color:rgba(255,255,255,.08);color:var(--sk-foot-mut)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-social a{border-color:color-mix(in srgb,var(--sk-foot-accent) 40%,transparent);color:var(--sk-foot-accent);border-radius:var(--sk-btn-r)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-social a:hover{background:var(--sk-foot-accent);color:var(--sk-foot-bg)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-news :is(input,button){border-radius:var(--sk-btn-r)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-news input:focus{border-color:var(--sk-foot-accent)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-news button{background:var(--sk-btn);color:var(--sk-btn-ink)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-fab{box-shadow:var(--sk-shadow-lg)} :is(body.h6-page,body.h7-page,body.h8-page,body.h9,body.h10) .zt-fab--call{background:var(--sk-btn);color:var(--sk-btn-ink)} /* ------------------------------------------------------------ inner pages */ body.sk{ --zt-ink:var(--sk-bg); --zt-ink2:var(--sk-bg2); --zt-panel:var(--sk-surface); --zt-glass:var(--sk-surface); --zt-gold:var(--sk-accent); --zt-gold-soft:var(--sk-accent); --zt-gold-deep:var(--sk-accent); --zt-ivory:var(--sk-text); --zt-mut:var(--sk-mut); --zt-line:var(--sk-line); --zt-r:var(--sk-r); --zt-hair:var(--sk-hair); --zt-text2:var(--sk-text2); --zt-icon:var(--sk-accent-2); --zt-img-shadow:rgba(15,20,30,.22); background:var(--sk-bg); color:var(--sk-text2); font-family:var(--sk-body); color-scheme:var(--sk-scheme); } /* Status colours: the pale tints zulk uses are for dark surfaces. */ body.sk:is(.h6-page,.h7-page,.h8-page,.h9){ --zt-ok:#15803d; --zt-warn:#a16207; --zt-err:#b91c1c; --zt-info:#1d4ed8; --sk-ok-ink:#166534; --sk-warn-ink:#854d0e; --sk-err-ink:#991b1b; --sk-info-ink:#1e40af; --zt-img-shadow:rgba(15,20,30,.18); } body.sk.h10{ --sk-ok-ink:#86efac; --sk-warn-ink:#fcd34d; --sk-err-ink:#fca5a5; --sk-info-ink:#93c5fd; --zt-img-shadow:rgba(0,0,0,.6); } .sk ::selection{background:var(--sk-accent-2);color:var(--sk-btn-ink)} .sk main :is(h1,h2,h3,h4),.sk .zt-serif{font-family:var(--sk-display);font-weight:var(--sk-display-w);color:var(--sk-text)} .sk :is(.zt-btn,.zt-input,.zt-select,.zt-textarea,.zt-steps div b,.zt-ac__item,.zt-demo__item,.zt-acct__nav button,.zt-news input,.zt-news button){font-family:var(--sk-body)} .sk :is(.zt-card__num,.zt-card__price,.zt-pick__box b,.zt-pick__rate,.zt-table b,.zt-empty b,.zt-stat b,.zt-why__item b,.zt-tst__who b,.zt-ava,.zt-cta__phone,.zt-fare__head b,.zt-fare__line--total,.zt-tile b,.zt-next__when b,.zt-tl b,.zt-faq__item summary,.zt-partner span,.zt-confirm-ref__num,.zt-auth__brand h2,.zt-panel__title,.zt-ticker span){font-family:var(--sk-display);font-weight:var(--sk-display-w)} .sk main{min-height:40vh} /* The design stylesheets set bare h2/h3/p defaults; these put back the spacing the shared components were drawn with. */ .sk .zt-h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;margin-bottom:16px} .sk .zt-h2 em{color:var(--sk-accent)} .sk .zt-card h3{font-size:1.35rem;margin:8px 0 10px} .sk .zt-why__item h3{font-size:1.1rem;margin-bottom:8px} .sk .zt-panel__head :is(h2,h3){font-size:1.25rem;margin:0} .sk .zt-cta h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0 auto 14px} .sk .zt-cta p{margin-bottom:30px} .sk .zt-about p{margin-bottom:16px;color:var(--sk-text2)} /* ---------- buttons ---------- */ .sk .zt-btn{border-radius:var(--sk-btn-r)} .sk .zt-btn--gold{background:var(--sk-btn);color:var(--sk-btn-ink);box-shadow:var(--sk-btn-glow)} .sk .zt-btn--gold:hover{box-shadow:var(--sk-shadow-lg);filter:saturate(1.08) brightness(1.03)} .sk .zt-btn--ghost{border-color:var(--sk-line);color:var(--sk-text);background:var(--sk-surface);backdrop-filter:none} .sk .zt-btn--ghost:hover{border-color:var(--sk-accent);color:var(--sk-accent);background:var(--sk-tint)} .sk .zt-btn--danger{border-color:color-mix(in srgb,var(--zt-err) 45%,transparent);color:var(--sk-err-ink);background:color-mix(in srgb,var(--zt-err) 8%,transparent)} .sk .zt-btn--danger:hover{background:var(--zt-err);color:#fff;border-color:var(--zt-err)} .sk .zt-eyebrow{color:var(--sk-accent)} .sk .zt-eyebrow::before{background:var(--sk-accent-2)} .sk .zt-lead{color:var(--sk-mut)} /* ---------- cards ---------- */ .sk .zt-card{background:var(--sk-surface);border:1px solid var(--sk-hair);box-shadow:var(--sk-shadow)} .sk .zt-card:hover{border-color:var(--sk-line);box-shadow:var(--sk-shadow-lg)} .sk .zt-card__art{background:radial-gradient(340px 180px at 50% 120%,var(--sk-tint),transparent 70%),var(--sk-bg2)} .sk .zt-card__art::before{background:linear-gradient(var(--sk-hair) 1px,transparent 1px),linear-gradient(90deg,var(--sk-hair) 1px,transparent 1px);background-size:26px 26px;opacity:.6} .sk .zt-card__art::after{background:linear-gradient(to top,var(--sk-surface) 2%,transparent 40%)} /* The photographs are full frames, not cut-outs: letterboxed inside the art well they read as thumbnails, so let them fill it edge to edge. */ .sk .zt-card__art:has(img){height:210px} .sk .zt-card__art:has(img)::before,.sk .zt-card__art:has(img)::after{display:none} .sk .zt-card__art img{object-fit:cover;padding:0;filter:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .sk .zt-card:hover .zt-card__art img{transform:scale(1.05)} .sk .zt-card__art:has(img) + .zt-card__body{padding-top:20px} .sk .zt-card__ring{border-color:var(--sk-line)} .sk .zt-card__num{color:var(--sk-accent);opacity:.7} .sk .zt-card p,.sk .zt-card__meta{color:var(--sk-mut)} .sk .zt-card__meta b,.sk .zt-card__price{color:var(--sk-text)} .sk .zt-card__link{color:var(--sk-accent)} /* ---------- panels and shells ---------- */ .sk :is(.zt-panel,.zt-panel--glass,.zt-cmd .zt-panel,.zt-cmd .zt-fare,.zt-auth .zt-panel){ background:var(--sk-surface);border:1px solid var(--sk-hair);box-shadow:var(--sk-shadow);backdrop-filter:none; } .sk .zt-panel__head{border-bottom-color:var(--sk-hair)} .sk .zt-panel__title{color:var(--sk-text)} .sk .zt-panel__foot{border-top-color:var(--sk-hair)} .sk .zt-incl li{color:var(--sk-text2)} .sk .zt-incl li i{color:var(--sk-accent-2)} .sk :is(.zt-cmd,.zt-auth){ background:linear-gradient(145deg,var(--sk-tint),transparent 45%),var(--sk-bg2); border:1px solid var(--sk-line);box-shadow:var(--sk-shadow-lg); } .sk .zt-cmd::before{background:radial-gradient(ellipse 70% 50% at 10% 0%,var(--sk-tint),transparent 55%)} .sk :is(.zt-cmd .zt-panel,.zt-auth .zt-panel){box-shadow:none} .sk .zt-cmd-rail__tag{color:var(--sk-accent)} .sk .zt-cmd-rail__tag::before{background:var(--sk-accent-2)} .sk .zt-auth__brand h2{color:var(--sk-text)} .sk .zt-auth__brand img{filter:none} .sk.h10 .zt-auth__brand img{filter:invert(1)} /* ---------- forms ---------- */ .sk :is(.zt-input,.zt-select,.zt-textarea,.fs-rate-filter){ background-color:var(--sk-field);border:1px solid var(--sk-hair);color:var(--sk-text); border-radius:calc(var(--sk-r) * .6); } .sk.h10 :is(.zt-input,.zt-select,.zt-textarea,.fs-rate-filter){border-radius:2px} .sk :is(.zt-input,.zt-select,.zt-textarea):hover{border-color:color-mix(in srgb,var(--sk-text) 22%,transparent)} .sk :is(.zt-input,.zt-select,.zt-textarea,.fs-rate-filter):focus{ border-color:var(--sk-accent-2);background-color:var(--sk-field);box-shadow:0 0 0 3px var(--sk-tint); } .sk :is(.zt-input,.zt-textarea)::placeholder{color:color-mix(in srgb,var(--sk-mut) 75%,transparent)} .sk .zt-select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")} .sk .zt-select option{background:var(--sk-surface);color:var(--sk-text)} .sk .zt-input:is([type=date],[type=time],[type=datetime-local]){color-scheme:var(--sk-scheme)} .sk :is(.zt-field label,.zt-label){color:var(--sk-mut)} .sk .zt-field label .zt-req{color:var(--sk-accent)} .sk .zt-help{color:var(--sk-mut)} .sk .zt-err{color:var(--sk-err-ink)} .sk .zt-check span{color:var(--sk-text2)} .sk .zt-check input{accent-color:var(--sk-accent-2)} .sk .zt-pw__eye:hover,.sk .zt-pw__eye[aria-pressed=true]{color:var(--sk-accent)} .sk .zt-pick__box{background:var(--sk-surface);border:1px solid var(--sk-hair);border-radius:calc(var(--sk-r) * .7)} .sk .zt-pick__box:hover{border-color:var(--sk-line)} .sk .zt-pick__item input:checked + .zt-pick__box{border-color:var(--sk-accent-2);background:var(--sk-tint);box-shadow:0 0 0 1px var(--sk-accent-2) inset} .sk .zt-pick__box small{color:var(--sk-mut)} .sk .zt-pick__rate{color:var(--sk-accent)} .sk .zt-pick__status--free{color:var(--sk-ok-ink)} .sk .zt-chip{background:var(--sk-surface);border-color:var(--sk-hair);color:var(--sk-mut);border-radius:var(--sk-btn-r)} .sk .zt-chip:hover{border-color:var(--sk-line);color:var(--sk-text)} .sk .zt-chip.zt-on{background:var(--sk-tint);border-color:var(--sk-accent-2);color:var(--sk-accent)} /* ---------- address autocomplete ---------- */ .sk .zt-ac{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow-lg);backdrop-filter:none} .sk .zt-ac__item{color:var(--sk-text2);border-top-color:var(--sk-hair)} .sk .zt-ac__item strong{color:var(--sk-text)} .sk :is(.zt-ac__item:hover,.zt-ac__item--on){background:var(--sk-tint)} .sk :is(.zt-ac__item:hover,.zt-ac__item--on) strong{color:var(--sk-accent)} /* ---------- alerts and badges ---------- */ .sk .zt-alert{border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-text2)} .sk .zt-alert--ok{border-color:color-mix(in srgb,var(--zt-ok) 40%,transparent);background:color-mix(in srgb,var(--zt-ok) 9%,var(--sk-surface));color:var(--sk-ok-ink)} .sk .zt-alert--err{border-color:color-mix(in srgb,var(--zt-err) 40%,transparent);background:color-mix(in srgb,var(--zt-err) 8%,var(--sk-surface));color:var(--sk-err-ink)} .sk .zt-alert--warn{border-color:color-mix(in srgb,var(--zt-warn) 45%,transparent);background:color-mix(in srgb,var(--zt-warn) 9%,var(--sk-surface));color:var(--sk-warn-ink)} .sk .zt-alert--info{border-color:color-mix(in srgb,var(--zt-info) 40%,transparent);background:color-mix(in srgb,var(--zt-info) 8%,var(--sk-surface));color:var(--sk-info-ink)} .sk .zt-alert--soft{border-color:var(--sk-hair);background:var(--sk-bg2);color:var(--sk-text2)} .sk .zt-alert--soft i{color:var(--sk-accent)} .sk .zt-badge{border-color:var(--sk-hair);background:var(--sk-bg2);color:var(--sk-text2)} .sk .zt-badge--ok{border-color:color-mix(in srgb,var(--zt-ok) 40%,transparent);background:color-mix(in srgb,var(--zt-ok) 10%,transparent);color:var(--sk-ok-ink)} .sk .zt-badge--warn{border-color:color-mix(in srgb,var(--zt-warn) 45%,transparent);background:color-mix(in srgb,var(--zt-warn) 10%,transparent);color:var(--sk-warn-ink)} .sk .zt-badge--err{border-color:color-mix(in srgb,var(--zt-err) 40%,transparent);background:color-mix(in srgb,var(--zt-err) 10%,transparent);color:var(--sk-err-ink)} .sk .zt-badge--info{border-color:color-mix(in srgb,var(--zt-info) 40%,transparent);background:color-mix(in srgb,var(--zt-info) 10%,transparent);color:var(--sk-info-ink)} .sk .zt-badge--gold{border-color:var(--sk-accent-2);background:var(--sk-tint);color:var(--sk-accent)} /* ---------- tables, lists, pager ---------- */ .sk .zt-tablewrap,.sk .fs-rates{border-color:var(--sk-hair);background:var(--sk-surface)} .sk .zt-table th{background:var(--sk-bg2);color:var(--sk-accent)} .sk .zt-table td{border-top-color:var(--sk-hair);color:var(--sk-text2)} .sk .zt-table tbody tr:hover{background:var(--sk-tint)} .sk .zt-table b{color:var(--sk-text)} .sk .zt-empty b{color:var(--sk-text)} .sk .fs-rates th{background:var(--sk-bg2);color:var(--sk-accent)} .sk .fs-rates :is(th,td){border-bottom-color:var(--sk-hair)} .sk .fs-rates tbody tr:nth-child(even){background:color-mix(in srgb,var(--sk-bg2) 55%,transparent)} .sk .fs-rates tbody tr:hover{background:var(--sk-tint)} .sk .zt-dl dd{color:var(--sk-text)} .sk :is(.zt-pager .page-item .page-link,.zt-pager a,.zt-pager span){ border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-text2);border-radius:calc(var(--sk-r) * .5); } .sk :is(.zt-pager .page-item.active .page-link,.zt-pager .page-item.active span){border-color:var(--sk-accent-2);background:var(--sk-tint);color:var(--sk-accent)} .sk :is(.zt-pager a:hover,.zt-pager .page-link:hover){border-color:var(--sk-accent-2);color:var(--sk-accent)} /* ---------- prose (CMS pages, blog) ---------- */ .sk .zt-prose{color:var(--sk-text2)} .sk .zt-prose > * + *{margin-top:1.1em} .sk .zt-prose h2{font-size:1.9rem;margin-top:1.8em} .sk .zt-prose h3{font-size:1.4rem;margin-top:1.6em} .sk .zt-prose h4{font-size:1.15rem;margin-top:1.4em;color:var(--sk-accent)} .sk .zt-prose a{color:var(--sk-accent);border-bottom-color:var(--sk-line)} .sk .zt-prose a:hover{color:var(--sk-text)} .sk .zt-prose blockquote{border-left-color:var(--sk-accent-2);color:var(--sk-text)} .sk .zt-prose hr{border-top-color:var(--sk-hair)} .sk .zt-prose :is(th,td){border-color:var(--sk-hair)} .sk .zt-prose code{background:var(--sk-bg2)} .sk .zt-prose li::marker{color:var(--sk-accent-2)} /* ---------- reviews, why, about, faq, partners, cta ---------- */ .sk .zt-tst__card{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow);backdrop-filter:none} .sk .zt-tst__card:hover{border-color:var(--sk-line)} .sk .zt-tst__card p{color:var(--sk-text2)} .sk .zt-tst__stars{color:var(--sk-accent-2)} .sk .zt-tst__reply{background:var(--sk-tint);border-left-color:var(--sk-accent-2)} .sk .zt-ava{background:var(--sk-btn);color:var(--sk-btn-ink);border-color:transparent} .sk .zt-why__item{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow)} .sk .zt-why__item::after{background:radial-gradient(closest-side,var(--sk-tint),transparent)} .sk .zt-about__media{background:radial-gradient(500px 260px at 50% 115%,var(--sk-tint),transparent 70%),var(--sk-bg2);border-color:var(--sk-hair)} .sk .zt-faq__item{background:var(--sk-surface);border-color:var(--sk-hair)} .sk .zt-faq__item[open]{border-color:var(--sk-line);box-shadow:var(--sk-shadow)} .sk .zt-faq__item summary{color:var(--sk-text)} .sk .zt-faq__item summary::after{color:var(--sk-accent)} .sk :is(.zt-gal img,.zt-partner){border-color:var(--sk-hair)} .sk .zt-partner{background:var(--sk-surface)} .sk .zt-cta{background:radial-gradient(700px 300px at 50% 120%,var(--sk-tint),transparent 70%),var(--sk-bg2);border-block-color:var(--sk-hair)} .sk .zt-cta__phone{color:var(--sk-accent);border-bottom-color:var(--sk-line)} .sk .zt-cta__phone:hover{color:var(--sk-text)} .sk .zt-ticker{background:var(--sk-bg2);border-block-color:var(--sk-hair)} .sk .zt-ticker span{color:var(--sk-text2)} /* ---------- booking: steps, fare, payment, confirmation ---------- */ .sk .zt-steps{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow);backdrop-filter:none} .sk.h10 .zt-steps{border-radius:2px} .sk .zt-steps div:not(:last-child)::after{background:var(--sk-line)} .sk .zt-steps div b{background:var(--sk-bg2);border-color:var(--sk-hair);color:var(--sk-mut)} .sk .zt-steps div.zt-on{border-color:var(--sk-line);background:var(--sk-tint);color:var(--sk-accent)} .sk .zt-steps div.zt-on b{background:var(--sk-btn);color:var(--sk-btn-ink)} .sk .zt-steps div.zt-done{color:var(--sk-text)} .sk .zt-steps div.zt-done b{background:color-mix(in srgb,var(--zt-ok) 14%,transparent);border-color:color-mix(in srgb,var(--zt-ok) 40%,transparent);color:var(--sk-ok-ink)} .sk .zt-fare{background:var(--sk-surface);border-color:var(--sk-line);box-shadow:var(--sk-shadow);backdrop-filter:none} .sk .zt-fare__head{background:linear-gradient(90deg,var(--sk-tint),transparent);border-bottom-color:var(--sk-line)} .sk .zt-fare__head b{color:var(--sk-text)} .sk .zt-fare__line{color:var(--sk-text2)} .sk .zt-fare__line span:last-child{color:var(--sk-text)} .sk .zt-fare__line--sub{border-top-color:var(--sk-hair)} .sk .zt-fare__line--total{color:var(--sk-accent)} .sk .zt-fare__line--credit span:last-child{color:var(--sk-ok-ink)} .sk .zt-fare__note{color:var(--sk-mut)} .sk .zt-fare--loading::after{background:linear-gradient(90deg,transparent,var(--sk-tint),transparent);background-size:200% 100%} .sk .zt-paymethod{border-color:var(--sk-hair);background:var(--sk-surface);color:var(--sk-mut)} .sk .zt-paymethod:hover{border-color:var(--sk-line);color:var(--sk-accent)} .sk .zt-paymethod.is-on{border-color:var(--sk-accent-2);background:var(--sk-tint);color:var(--sk-accent)} .sk .zt-confirm-ref{background:radial-gradient(ellipse 70% 80% at 50% 0%,var(--sk-tint),transparent 60%),var(--sk-surface);border-color:var(--sk-line);box-shadow:var(--sk-shadow-lg)} .sk .zt-confirm-ref__num{color:var(--sk-accent);text-shadow:none} .sk .zt-demo{border-color:var(--sk-line);background:var(--sk-tint)} .sk :is(.zt-demo__head,.zt-demo__note){border-color:var(--sk-line)} .sk .zt-demo__item{color:var(--sk-text2);border-top-color:var(--sk-hair)} .sk .zt-demo__item:hover{background:var(--sk-tint)} .sk .zt-demo__head small{border-color:var(--sk-hair)} /* ---------- account ---------- */ .sk .zt-acct__nav{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow);backdrop-filter:none} .sk :is(.zt-acct__nav a,.zt-acct__nav-out){color:var(--sk-text2)} .sk .zt-acct__nav a:hover{background:var(--sk-tint);color:var(--sk-accent)} .sk .zt-acct__nav a.zt-active{background:var(--sk-tint);color:var(--sk-accent)} .sk .zt-acct__nav form{border-color:var(--sk-hair)} .sk .zt-acct__nav-out:hover{background:color-mix(in srgb,var(--zt-err) 9%,transparent);color:var(--sk-err-ink)} .sk .zt-tile{background:var(--sk-surface);border-color:var(--sk-hair);box-shadow:var(--sk-shadow)} .sk .zt-tile b{color:var(--sk-text)} .sk a.zt-tile:hover small{color:var(--sk-accent)} .sk .zt-tile--due{border-color:color-mix(in srgb,var(--zt-warn) 45%,transparent);background:color-mix(in srgb,var(--zt-warn) 8%,var(--sk-surface))} .sk .zt-tile--due b{color:var(--sk-warn-ink)} .sk .zt-next{background:linear-gradient(135deg,var(--sk-tint),var(--sk-surface) 60%);border-color:var(--sk-line);border-left-color:var(--sk-accent-2);box-shadow:var(--sk-shadow)} .sk .zt-next__when b{color:var(--sk-text)} .sk .zt-next__leg{color:var(--sk-text2)} .sk .zt-next__dot{border-color:var(--sk-accent-2)} .sk .zt-next__dot--end{background:var(--sk-accent-2)} .sk .zt-tl::before{background:var(--sk-line)} .sk .zt-tl li::before{background:var(--sk-bg);border-color:var(--sk-accent-2)} .sk .zt-tl b{color:var(--sk-text)} .sk .zt-tl p{color:var(--sk-text2)} /* ---------- live tracking ---------- */ .sk .zt-track li.is-done b{background:var(--sk-accent-2);border-color:var(--sk-accent-2);color:var(--sk-btn-ink)} .sk .zt-track li.is-done:not(:last-child)::after{background:var(--sk-accent-2)} .sk .zt-track li.is-now b{background:var(--sk-btn);border-color:transparent;color:var(--sk-btn-ink);box-shadow:0 0 0 5px var(--sk-tint);animation:none} .sk .zt-plate{background:var(--sk-bg2)} /* ---------------------------------------------------------- page header */ .sk .zt-phead{ padding:176px 0 72px;border-bottom:1px solid var(--sk-hair); background:var(--sk-bg2); } .sk .zt-phead h1{ background:none;-webkit-background-clip:border-box;background-clip:border-box; color:var(--sk-head-ink);-webkit-text-fill-color:currentColor; font-size:clamp(2.2rem,5.2vw,3.8rem);letter-spacing:-.005em; } .sk .zt-phead p{color:var(--sk-head-mut);margin:16px auto 0;font-size:1.05rem} .sk .zt-phead .zt-crumbs{color:var(--sk-head-mut);margin-top:24px} .sk .zt-phead .zt-crumbs a:hover{color:var(--sk-head-accent)} .sk .zt-phead .zt-crumbs span{color:var(--sk-head-accent);opacity:.7} .sk .zt-phead .zt-eyebrow{color:var(--sk-head-accent)} /* Daylight: the sunset washes of its hero, kept behind the title. */ .sk--home6 .zt-phead{ background: radial-gradient(620px 320px at 12% 0%,rgba(255,107,107,.22),transparent 70%), radial-gradient(560px 300px at 88% 10%,rgba(255,169,77,.24),transparent 70%), radial-gradient(800px 260px at 50% 120%,rgba(211,169,79,.16),transparent 70%), var(--sk-bg); } .sk--home6 .zt-phead h1 em{font-style:normal;background:linear-gradient(100deg,#C4362B,#9A5B12 52%,#7E611A);-webkit-background-clip:text;background-clip:text;color:transparent} /* Obsidian Atelier: an obsidian band, lit from above, under a pearl page. */ .sk--home7 .zt-phead{ background: radial-gradient(900px 380px at 50% -30%,rgba(212,175,106,.22),transparent 65%), linear-gradient(180deg,#101014,#08080A); border-bottom:1px solid rgba(212,175,106,.28); } .sk--home7 .zt-phead h1{font-weight:500;font-size:clamp(2.6rem,6vw,4.4rem)} .sk--home7 .zt-phead h1 em{font-style:italic;color:#D4AF6A} /* White Gold: white paper, a gold glow and a faint drafting grid. */ .sk--home8 .zt-phead{ background: radial-gradient(700px 320px at 50% 0%,rgba(232,197,71,.20),transparent 70%), linear-gradient(rgba(201,162,39,.07) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,rgba(201,162,39,.07) 1px,transparent 1px) 0 0/44px 44px, #FFFDF8; } /* Showroom: a lit studio floor — spotlight above, turntable ring below. */ .sk--home9 .zt-phead{ position:relative; background: radial-gradient(760px 340px at 50% -10%,#FFFFFF,transparent 70%), radial-gradient(1100px 200px at 50% 112%,rgba(176,141,74,.14),transparent 70%), linear-gradient(180deg,#F9FAFC,#EDF1F6); } .sk--home9 .zt-phead::after{ content:"";position:absolute;left:50%;bottom:-120px;width:min(900px,120%);height:200px; transform:translateX(-50%);border-radius:50%; border:1px solid rgba(176,141,74,.35);box-shadow:0 0 0 22px rgba(15,27,45,.025); pointer-events:none; } /* Night Drive: the deco sunburst from its hero, behind the title. */ .sk--home10 .zt-phead{ position:relative; background: repeating-conic-gradient(from 180deg at 50% 120%,rgba(221,190,130,.07) 0deg 1.2deg,transparent 1.2deg 7deg), radial-gradient(800px 360px at 50% 110%,rgba(221,190,130,.14),transparent 70%), linear-gradient(180deg,#08101B,#0B1422); border-bottom:1px solid var(--sk-line); } .sk--home10 .zt-phead h1{letter-spacing:.02em} .sk--home10 .zt-phead::after{ content:"";position:absolute;left:50%;bottom:28px;width:120px;height:1px;transform:translateX(-50%); background:linear-gradient(90deg,transparent,#DDBE82,transparent); } /* ------------------------------------------------------------ type voice */ /* Showroom speaks in sentence case; the classic wide-tracked capitals look borrowed next to Figtree. */ .sk--home9 :is(.zt-btn,.zt-chip,.zt-card__link,.zt-news button){ text-transform:none;letter-spacing:0;font-weight:600;font-size:.95rem; } .sk--home9 :is(.zt-field label,.zt-label,.zt-eyebrow,.zt-crumbs,.zt-card__price small,.zt-card__num,.zt-steps div,.zt-dl dt,.zt-table th,.zt-tile small,.zt-cmd-rail__tag,.zt-acct__nav a,.zt-acct__nav-out,.zt-badge){ letter-spacing:.1em; } .sk--home9 .zt-btn--sm{font-size:.85rem} /* Night Drive: square deco edges on every control. */ .sk--home10 :is(.zt-chip,.zt-badge,.zt-pager a,.zt-pager span,.zt-paymethod,.zt-pick__box,.zt-steps div,.zt-tile,.zt-faq__item,.zt-tablewrap){border-radius:2px} /* ------------------------------------------------------------ small screens */ @media(max-width:640px){ .sk .zt-phead{padding:140px 0 54px} }