/* =================================================================== Palazzo Aventino — v3 visual language Maximalist Arab–Roman opulence. Three house styles × two worlds, driven by data-style / data-world on . Material accent is injected per-room via --mat / --mat-2 / --mat-deep custom props. =================================================================== */ :root{ /* base neutrals (shared) */ --travertine:#efe9df; --stone:#ded5c6; --ink:#241f18; --ink-soft:#7c7264; --line:#cdc2af; --gold:#c79a4b; --gold-deep:#9a6f2e; --serif:"Cormorant Garamond", Georgia, serif; --ui:"Jost", system-ui, sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,.1,.2,1); /* defaults; overridden per style/world below */ --bg:#15110c; --sky-top:#2a2016; --sky-bot:#16110b; /* ceiling / sky band */ --wall:#241a12; --recess-top:#1a130c; --recess-bot:#070504; --col:#3a2c1c; --col-hi:#5a432a; --col-lo:#150f08; --floor-top:#241a11; --floor-bot:#0d0907; --mat:#c79a4b; --mat-2:#e6c478; --mat-deep:#6e4e1c; /* room material accent */ --frieze:.0; /* ornament band opacity */ --vignette:.55; /* corner darkness */ --bloom:.5; /* lantern / light glow strength */ --sat:1; /* environment saturation multiplier via filter */ --bri:1; --con:1; /* environment brightness / contrast — the live color grade per style */ --chrome:#fff; /* chrome text on viewer */ --accent:var(--gold); /* chrome accent */ --card-bg:rgba(241,235,225,.93); --card-ink:#241f18; --card-orn:0; /* caption ornamental frame */ } /* ---------- STYLE: Photoreal — restrained, true-to-life ---------- */ html[data-style="photoreal"]{ --frieze:0; --vignette:.34; --bloom:.34; --sat:.86; --bri:1.02; --con:.97; --card-orn:0; --accent:#b88a4a; } /* ---------- STYLE: Elegant Maximalism — gilded, jewelled ---------- */ html[data-style="maximal"]{ --frieze:.9; --vignette:.5; --bloom:.62; --sat:1.22; --bri:1.05; --con:1.08; --card-orn:1; --accent:var(--gold); } /* ---------- STYLE: Cinematic Realism — dark, filmic ---------- */ html[data-style="cinematic"]{ --frieze:.32; --vignette:.82; --bloom:.78; --sat:1.0; --bri:.8; --con:1.22; --card-orn:0; --accent:#d8b46a; } /* ---------- WORLD: Palazzo (interior, jewel-dark) ---------- */ html[data-world="palazzo"]{ --bg:#15110c; --sky-top:#33271a; --sky-bot:#19120b; --wall:#241a12; --recess-top:#1c140d; --recess-bot:#070504; --col:#3c2d1d; --col-hi:#6a4f31; --col-lo:#140e07; --floor-top:#2a1f14; --floor-bot:#0c0805; } html[data-world="palazzo"][data-style="cinematic"]{ --sky-top:#251c12; --sky-bot:#0e0a06; --wall:#1a130c; --floor-top:#1c150d; --floor-bot:#070504; } html[data-world="palazzo"][data-style="photoreal"]{ --sky-top:#4a3a26; --sky-bot:#2a2014; --wall:#3a2c1d; --recess-top:#2c2114; --col-hi:#7a5d3a; --floor-top:#3a2c1c; --floor-bot:#1a120b; } /* ---------- WORLD: Fuori (exterior, travertine daylight) ---------- */ html[data-world="fuori"]{ --bg:#cdd3cb; --sky-top:#bcd0d6; --sky-bot:#eae4d4; --wall:#d8cdb9; --recess-top:#c2b9a2; --recess-bot:#9a8f76; --col:#c9bca6; --col-hi:#e7ddc9; --col-lo:#a99c82; --floor-top:#cdbfa6; --floor-bot:#a3957a; --chrome:#2a2218; } html[data-world="fuori"][data-style="cinematic"]{ --sky-top:#9fb0b4; --sky-bot:#d3c9b4; --vignette:.6; } html[data-world="fuori"][data-style="maximal"]{ --sky-top:#bcd6d2; --sky-bot:#f1ead7; } /* =================================================================== */ *{box-sizing:border-box; margin:0; padding:0} html,body{height:100%} body{ font-family:var(--ui); color:var(--ink); background:var(--bg); overflow:hidden; -webkit-font-smoothing:antialiased; transition:background .9s var(--ease); } /* ---------- stage + environment ---------- */ #stage{position:fixed; inset:0; z-index:1; overflow:hidden; background:var(--bg); cursor:grab;} #stage.grabbing{cursor:grabbing;} .scene{position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); filter:saturate(var(--sat)); will-change:transform;} /* live color grade for the actual 360 — re-tints whatever is on screen each time the style swaps */ #stage canvas{ filter:saturate(var(--sat)) brightness(var(--bri)) contrast(var(--con)); transition:filter .9s var(--ease); } /* the single "walk on" exit arrow on the floor ahead (Photo Sphere Viewer html marker) */ .exit-arrow{ width:58px; height:58px; cursor:pointer; opacity:.82; background:radial-gradient(circle at 50% 62%, color-mix(in oklab,var(--gold),#fff 35%), var(--gold) 58%, transparent 74%); clip-path:polygon(50% 4%, 100% 100%, 50% 74%, 0 100%); /* upward chevron = forward */ filter:drop-shadow(0 0 12px color-mix(in oklab,var(--gold),#fff 10%)); animation:exitpulse 1.9s var(--ease) infinite; transition:opacity .3s; } .exit-arrow:hover{ opacity:1; } @keyframes exitpulse{ 0%,100%{ transform:translateY(0) scale(1); opacity:.62; } 50%{ transform:translateY(-7px) scale(1.07); opacity:1; } } .scene.live{opacity:1;} .scene.depart{opacity:0; transform:scale(1.14); transition:opacity .7s var(--ease), transform .9s var(--ease);} .scene.arrive{animation:arrive 1.1s var(--ease) both;} @keyframes arrive{from{transform:scale(1.12); opacity:0;} to{transform:scale(1); opacity:1;}} /* the wide, drag-pannable panorama strip */ .strip{position:absolute; top:0; bottom:0; left:50%; width:240vw; margin-left:-120vw; transform:translateX(var(--pan,0px)) translateY(var(--tilt,0px)); will-change:transform;} .sky{position:absolute; left:0; right:0; top:0; height:46%; background:linear-gradient(to bottom, var(--sky-top), var(--sky-bot));} .floor{position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(to bottom, var(--floor-top), var(--floor-bot));} .floor::before{content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0, transparent 7.6%, rgba(0,0,0,.16) 7.6%, rgba(0,0,0,.16) 7.9%), radial-gradient(120% 80% at 50% 0%, rgba(255,240,210,calc(var(--bloom)*.10)), transparent 60%);} .floor::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:rgba(0,0,0,.3);} .arcade{position:absolute; left:0; right:0; top:30%; height:40%;} /* an arch bay (interior) or intercolumniation (exterior) */ .bay{position:absolute; top:0; bottom:0; display:flex; align-items:flex-end; justify-content:center;} .recess{position:absolute; left:8%; right:8%; bottom:0; top:8%; background:linear-gradient(to bottom, var(--recess-top), var(--recess-bot)); border-radius:48% 48% 6% 6%/38% 38% 4% 4%; box-shadow:inset 0 18px 40px rgba(0,0,0,.55), inset 0 -10px 30px rgba(0,0,0,.5); overflow:hidden;} /* horseshoe inner arch + far glow for depth */ .recess::before{content:""; position:absolute; left:22%; right:22%; bottom:0; top:26%; background:linear-gradient(to bottom, color-mix(in oklab, var(--recess-top), var(--mat) 22%), var(--recess-bot)); border-radius:50% 50% 4% 4%/42% 42% 3% 3%;} .recess::after{content:""; position:absolute; left:50%; top:60%; width:46%; height:50%; transform:translateX(-50%); background:radial-gradient(60% 60% at 50% 40%, rgba(255,226,170,calc(var(--bloom)*.9)), transparent 70%); filter:blur(2px);} /* column between bays */ .col{position:absolute; top:2%; bottom:0; width:3.1%; background:linear-gradient(90deg, var(--col-lo), var(--col-hi) 42%, var(--col) 56%, var(--col-lo)); border-radius:40% 40% 6% 6%/4% 4% 1% 1%; box-shadow:0 0 18px rgba(0,0,0,.4);} .col::before{content:""; position:absolute; left:-26%; right:-26%; top:0; height:5%; background:linear-gradient(90deg, var(--col-lo), var(--mat-2) 50%, var(--col-lo)); border-radius:4px; opacity:calc(.5 + var(--frieze)*.5);} .col::after{content:""; position:absolute; left:-18%; right:-18%; bottom:0; height:3.4%; background:linear-gradient(90deg, var(--col-lo), var(--col-hi) 50%, var(--col-lo));} /* hanging lantern (palazzo) */ .lantern{position:absolute; top:6%; width:26px; height:46px; transform:translateX(-50%);} .lantern .cord{position:absolute; left:50%; top:-40%; width:1px; height:42%; transform:translateX(-50%); background:linear-gradient(rgba(255,255,255,.25), transparent);} .lantern .body{position:absolute; inset:0; background:linear-gradient(180deg, var(--mat-2), var(--mat-deep)); clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%); box-shadow:0 0 22px rgba(255,210,140,calc(var(--bloom)*1.1)), 0 0 70px rgba(255,190,110,calc(var(--bloom)*.7));} .lantern .glow{position:absolute; left:50%; top:50%; width:160px; height:160px; transform:translate(-50%,-46%); background:radial-gradient(circle, rgba(255,214,150,calc(var(--bloom)*.55)), transparent 66%); pointer-events:none;} /* distant skyline / cypress (fuori) */ .skyline{position:absolute; left:0; right:0; bottom:0; top:54%; opacity:.9;} .dome{position:absolute; bottom:0; background:linear-gradient(to top, rgba(110,96,74,.6), rgba(140,124,98,.5));} .cypress{position:absolute; bottom:0; width:34px; background:linear-gradient(to top, #2f3f2a, #44563a); border-radius:50% 50% 12% 12%/40% 40% 6% 6%; box-shadow:0 0 16px rgba(0,0,0,.18);} .fountain{position:absolute; left:50%; bottom:4%; width:120px; height:60px; transform:translateX(-50%); background:radial-gradient(60% 90% at 50% 100%, rgba(255,255,255,.5), transparent 70%);} /* friezes top & bottom (ornament band) */ .frieze{position:absolute; left:0; right:0; height:3.4%; opacity:var(--frieze); background: repeating-linear-gradient(90deg, transparent 0, transparent 1.1%, color-mix(in oklab, var(--gold), var(--mat) 30%) 1.1%, color-mix(in oklab,var(--gold),var(--mat) 30%) 1.5%, transparent 1.5%, transparent 2.6%), linear-gradient(to bottom, var(--gold-deep), var(--gold) 50%, var(--gold-deep)); -webkit-mask:repeating-linear-gradient(90deg, #000 0 2.2%, transparent 2.2% 2.6%); mask:repeating-linear-gradient(90deg, #000 0 2.2%, transparent 2.2% 2.6%);} .frieze.top{top:29%;} .frieze.bot{top:69.2%;} /* atmosphere overlays (over strip, fixed to stage) */ .vignette{position:absolute; inset:0; pointer-events:none; z-index:6; background:radial-gradient(130% 100% at 50% 42%, transparent 38%, rgba(8,5,3,var(--vignette)) 100%);} .bars{position:absolute; inset:0; pointer-events:none; z-index:7; opacity:0; transition:opacity .9s var(--ease);} html[data-style="cinematic"] .bars{opacity:1;} .bars::before,.bars::after{content:""; position:absolute; left:0; right:0; height:7vh; background:#050403;} .bars::before{top:0;} .bars::after{bottom:0;} .dust{position:absolute; inset:0; pointer-events:none; z-index:6; opacity:calc(var(--bloom)*.5); mix-blend-mode:screen; background: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,230,180,.9), transparent), radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,230,180,.7), transparent), radial-gradient(1px 1px at 45% 80%, rgba(255,230,180,.6), transparent), radial-gradient(1px 1px at 85% 25%, rgba(255,230,180,.6), transparent), radial-gradient(1.5px 1.5px at 35% 50%, rgba(255,230,180,.5), transparent);} /* ============================ CHROME ============================== */ .veil{position:fixed; inset:0; z-index:10; pointer-events:none; opacity:0; transition:opacity .8s var(--ease); background:linear-gradient(to bottom, rgba(20,16,12,.40) 0%, rgba(20,16,12,.06) 40%, rgba(20,16,12,.5) 100%);} .veil.on{opacity:1;} .layer{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:30; transition:opacity .9s var(--ease), visibility .9s var(--ease);} .layer.hidden{opacity:0; visibility:hidden;} /* intro */ #intro{flex-direction:column; text-align:center; color:#fff; padding:24px; overflow:hidden;} #intro .introScene{position:absolute; inset:0; z-index:-1; filter:saturate(var(--sat)) brightness(.7);} #intro::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 50% 40%, rgba(20,15,9,.4), rgba(12,9,5,.82));} .eyebrow{font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.82);} .title{font-family:var(--serif); font-weight:500; font-size:clamp(56px,11vw,150px); line-height:.9; letter-spacing:-.015em; color:#fff; text-shadow:0 4px 50px rgba(0,0,0,.6); margin:.16em 0 0;} .title em{font-style:italic; color:var(--gold);} .rule{width:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:clamp(22px,4vh,38px) auto; animation:ruleIn 1.4s .3s var(--ease) forwards;} @keyframes ruleIn{to{width:min(220px,40vw);}} .loc{font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.9);} .stats{display:flex; gap:clamp(18px,3vw,46px); justify-content:center; flex-wrap:wrap; margin-top:clamp(20px,4vh,40px);} .stat{display:flex; flex-direction:column; gap:6px;} .stat b{font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.4vw,32px); line-height:1; color:#fff;} .stat b em{font-style:italic; color:var(--gold);} .stat span{font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.78;} .btn{font-family:var(--ui); font-weight:500; font-size:12px; letter-spacing:.26em; text-transform:uppercase; background:#fff; color:var(--ink); border:0; padding:18px 42px; cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease), letter-spacing .4s var(--ease);} .btn:hover{background:var(--gold); color:#fff; letter-spacing:.32em;} #intro .btn{margin-top:clamp(30px,6vh,56px);} /* top bar */ #topbar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(15px,2.2vw,26px) clamp(16px,2.4vw,32px); transition:opacity .6s var(--ease), visibility .6s var(--ease);} #topbar.hidden{opacity:0; visibility:hidden;} .wordmark{background:none; border:0; cursor:pointer; text-align:left; color:var(--chrome); text-shadow:0 2px 16px rgba(0,0,0,.45); flex:1 1 0; min-width:0;} .wm-name{font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.7vw,21px); line-height:1.05;} .wm-name em{font-style:italic; color:var(--accent);} .wm-sub{font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.82; margin-top:3px;} .tabs{display:flex; gap:4px; padding:4px; border:1px solid rgba(180,150,100,.4); border-radius:999px; backdrop-filter:blur(10px); background:rgba(20,16,12,.3);} html[data-world="fuori"] .tabs{background:rgba(245,240,228,.5); border-color:rgba(120,100,70,.3);} .tab{font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chrome); opacity:.78; background:none; border:0; padding:9px 22px; border-radius:999px; cursor:pointer; transition:all .35s var(--ease);} .tab.active{background:var(--accent); color:#1a130a; opacity:1;} .topright{flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(12px,1.6vw,22px);} .counter{font-size:12px; letter-spacing:.18em; font-variant-numeric:tabular-nums; color:var(--chrome); opacity:.85; text-shadow:0 2px 12px rgba(0,0,0,.4); white-space:nowrap;} /* style switch (segmented, bottom-center) */ #stylebar{position:fixed; left:50%; bottom:clamp(16px,2.4vw,26px); transform:translateX(-50%); z-index:40; display:flex; gap:3px; padding:4px; border-radius:999px; border:1px solid rgba(180,150,100,.38); background:rgba(20,16,12,.42); backdrop-filter:blur(12px); transition:opacity .6s var(--ease), visibility .6s var(--ease);} #stylebar.hidden{opacity:0; visibility:hidden;} html[data-world="fuori"] #stylebar{background:rgba(245,240,228,.55); border-color:rgba(120,100,70,.28);} .sbtn{font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--chrome); opacity:.72; background:none; border:0; padding:9px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:all .3s var(--ease);} .sbtn:hover{opacity:1;} .sbtn.active{background:var(--accent); color:#1a130a; opacity:1;} .sbtn .dot{display:none;} @media (max-width:600px){ .sbtn{padding:9px 12px; letter-spacing:.08em;} } /* caption */ #caption{position:fixed; left:clamp(16px,2.4vw,32px); bottom:clamp(70px,7vw,92px); z-index:20; max-width:min(430px,calc(100% - 32px)); padding:clamp(18px,2.1vw,26px) clamp(20px,2.3vw,30px); background:var(--card-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(205,194,175,.7); border-radius:2px; box-shadow:0 24px 60px -28px rgba(0,0,0,.7); transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s var(--ease);} #caption.hidden{opacity:0; transform:translateY(10px); visibility:hidden;} /* ornamental gilt frame for maximal */ #caption::before{content:""; position:absolute; inset:5px; border:1px solid var(--gold); opacity:calc(var(--card-orn)*.7); pointer-events:none; border-radius:1px;} #caption::after{content:""; position:absolute; inset:5px; pointer-events:none; opacity:var(--card-orn); background: radial-gradient(8px 8px at 0 0, transparent 6px, var(--gold) 6px, var(--gold) 7px, transparent 7px) no-repeat top left, radial-gradient(8px 8px at 100% 0, transparent 6px, var(--gold) 6px, var(--gold) 7px, transparent 7px) no-repeat top right, radial-gradient(8px 8px at 0 100%, transparent 6px, var(--gold) 6px, var(--gold) 7px, transparent 7px) no-repeat bottom left, radial-gradient(8px 8px at 100% 100%, transparent 6px, var(--gold) 6px, var(--gold) 7px, transparent 7px) no-repeat bottom right; background-size:16px 16px;} .cap-eyebrow{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:9px;} .cap-eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--gold),transparent); opacity:.6;} .cap-title{font-family:var(--serif); font-weight:500; font-size:clamp(27px,3vw,40px); line-height:1.0; margin:11px 0 2px; color:var(--card-ink);} .cap-sub{font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.5vw,19px); color:var(--gold-deep);} .cap-desc{font-family:var(--serif); font-size:clamp(14.5px,1.35vw,16.5px); line-height:1.55; color:var(--card-ink); opacity:.86; margin-top:9px;} .cap-mat{display:inline-flex; align-items:center; gap:8px; margin-top:13px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);} .cap-mat i{width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--mat-2), var(--mat-deep)); box-shadow:0 0 0 1px rgba(0,0,0,.15);} .cap-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;} .cap-btn{font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:var(--travertine); border:0; padding:12px 20px; cursor:pointer; transition:background .35s var(--ease), letter-spacing .35s var(--ease); display:inline-flex; align-items:center; gap:8px;} .cap-btn:hover{background:var(--gold); letter-spacing:.22em;} .cap-btn.ghost{background:transparent; color:var(--card-ink); border:1px solid var(--line);} .cap-btn.ghost:hover{border-color:var(--gold); color:var(--gold-deep); background:transparent;} .cap-btn[disabled]{opacity:.34; cursor:default; pointer-events:none;} /* hint */ #hint{position:fixed; left:50%; bottom:clamp(70px,7vw,92px); transform:translateX(-50%); z-index:25; color:#fff; font-size:11px; letter-spacing:.24em; text-transform:uppercase; background:rgba(20,16,12,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); padding:11px 20px; border-radius:999px; transition:opacity .6s var(--ease); text-shadow:0 1px 8px rgba(0,0,0,.5);} #hint.hidden{opacity:0; pointer-events:none;} /* conjure overlay */ #conjure{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; color:#fff; opacity:0; visibility:hidden; background:radial-gradient(120% 90% at 50% 50%, rgba(28,21,13,.62), rgba(12,9,5,.9)); transition:opacity .7s var(--ease), visibility .7s var(--ease);} #conjure.on{opacity:1; visibility:visible;} .cj-arc{width:84px; height:84px;} .cj-arc circle{fill:none; stroke-width:1.5;} .cj-arc .track{stroke:rgba(255,255,255,.14);} .cj-arc .prog{stroke:var(--gold); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .3s linear;} .cj-glyph{position:absolute; font-family:var(--serif); font-style:italic; font-size:26px; color:var(--gold); opacity:.9;} .cj-phrase{font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,34px); color:#fff; text-align:center; min-height:1.3em; transition:opacity .5s var(--ease);} .cj-name{font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.4vw,52px); color:#fff; text-align:center; opacity:0; letter-spacing:.02em;} .cj-name.show{animation:nameIn 1s var(--ease) forwards;} @keyframes nameIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}} .cj-sub{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.6);} /* closing */ #closing{flex-direction:column; text-align:center; color:#fff; background:radial-gradient(120% 90% at 50% 30%, rgba(58,46,30,.55), rgba(12,9,5,.95));} #closing .ct{font-family:var(--serif); font-weight:500; font-size:clamp(36px,6vw,72px); line-height:1; color:#fff;} #closing .ct em{font-style:italic; color:var(--gold);} #closing .cs{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,26px); color:rgba(255,255,255,.86); margin-top:18px; max-width:34ch;} #closing .contact{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:clamp(28px,5vh,46px);} #closing .contact a{color:#fff; border-bottom:1px solid rgba(255,255,255,.4); text-decoration:none;} #closing .brand{font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:14px;} @media (max-width:640px){ .wm-sub{display:none;} .tab{padding:8px 13px; letter-spacing:.12em;} .stats{gap:16px;} #caption{bottom:78px;} .topright .counter{display:none;} }