/* ===================================================== THE SOLSTICE LABORATORY — dual-theme (dark + light) Default: dark (noite). Light (dia) via [data-theme="light"] no . ===================================================== */ @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Epilogue:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"); @font-face{ font-family:"PP Migra";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/PPMigra-Regular.woff2") format("woff2"); } @font-face{ font-family:"PP Migra";font-style:italic;font-weight:400;font-display:swap; src:url("fonts/PPMigra-Italic.woff2") format("woff2"); } @font-face{ font-family:"PP Migra";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/PPMigra-Bold.woff2") format("woff2"); } @font-face{ font-family:"PP Migra";font-style:italic;font-weight:700;font-display:swap; src:url("fonts/PPMigra-BoldItalic.woff2") format("woff2"); } /* ===== TOKENS — tema escuro (default) ===== */ :root{ --bg: #000; --text: #FFFFFF; /* títulos display + body principal */ --text-2: #C4C4C4; /* corpo 25px */ --eyebrow: #9A9A9A; /* eyebrow / footer secundário */ --brand: #818181; /* logo header */ --nav: #707070; /* nav top */ --blue: #314CAF; --blue-2: #304DB0; /* footer big */ --line: rgba(255,255,255,.18); --line-soft: rgba(255,255,255,.10); --panel: transparent; /* sem painel no dark */ --book-bg: transparent; /* sem fundo azul no dark */ --btn-color: #FFFFFF; /* botões claros no dark */ --btn-hover: #000; --pill-color:#FFFFFF; --pill-sub: #9A9A9A; --menu-h: 72px; } /* ===== TOKENS — tema claro (dia) ===== */ :root[data-theme="light"]{ --bg: #EDEDED; --text: #314CAF; /* títulos + body em azul */ --text-2: #314CAF; /* corpo também azul */ --eyebrow: #818181; --brand: #818181; --nav: #818181; --blue: #314CAF; --blue-2: #304DB0; --line: rgba(49,76,175,.35); --line-soft: rgba(49,76,175,.18); --panel: rgba(237,237,237,.8); /* painéis translúcidos visíveis */ --book-bg: #314CAF; /* fundo azul atrás do book mockup */ --btn-color: #314CAF; --btn-hover: #FFFFFF; --pill-color:#314CAF; --pill-sub: #314CAF; } *{box-sizing:border-box;margin:0;padding:0} html,body{ background:var(--bg);color:var(--text); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .35s ease, color .35s ease; } a{color:inherit;text-decoration:none} img{display:block;max-width:none} /* Tipos */ .serif {font-family:"PP Migra",Georgia,serif} .serif-italic {font-family:"PP Migra",Georgia,serif;font-style:italic} .epilogue {font-family:"Epilogue",sans-serif} .neco {font-family:"EB Garamond",Georgia,serif} /* ===== HEADER FIXO ===== */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--menu-h); display:flex;align-items:center;justify-content:space-between; padding:0 clamp(20px,3vw,60px); background:transparent; border-bottom:1px solid transparent; font-family:"PP Migra",Georgia,serif; transition:background .35s, border-color .35s; } .header.is-scrolled{ background:rgba(0,0,0,.6); border-bottom-color:var(--line-soft); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); } [data-theme="light"] .header.is-scrolled{ background:rgba(237,237,237,.8); } .header .brand{font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--brand);text-transform:uppercase} .header nav{ display:flex;gap:clamp(8px,1.4vw,18px); font-family:"Helvetica Neue","Inter",sans-serif; font-size:11px;letter-spacing:.18em;color:var(--nav);text-transform:uppercase; } .header nav a{padding:6px 4px;transition:color .25s} .header nav a:hover, .header nav a.active{color:var(--text)} /* Theme toggle — 2 botões DIA / NOITE */ .theme-toggle{ display:flex;gap:8px;align-items:center;margin-left:18px; font-family:"Epilogue",sans-serif; } .theme-toggle button{ background:transparent;border:1px solid var(--nav); color:var(--nav);cursor:pointer; padding:6px 14px;border-radius:9999px; font-size:10px;letter-spacing:.18em;text-transform:uppercase; transition:all .25s ease; font-family:inherit; } .theme-toggle button:hover{color:var(--text);border-color:var(--text)} .theme-toggle button.is-active{ background:var(--text);color:var(--bg); border-color:var(--text); } .menu-toggle{display:none;background:none;border:0;color:var(--brand);cursor:pointer;font-size:22px;padding:8px} @media (max-width:860px){ .header nav{ position:fixed;inset:var(--menu-h) 0 auto 0;flex-direction:column;gap:0; background:var(--bg);padding:18px 0; transform:translateY(-110%);transition:transform .35s; border-bottom:1px solid var(--line-soft); } .header nav.open{transform:translateY(0)} .header nav a{padding:14px 24px;width:100%;text-align:center;font-size:13px} .menu-toggle{display:block} } /* ===== CANVAS escalável ===== */ .page{position:relative;width:100%;overflow:hidden;background:var(--bg);transition:background .35s} .canvas{ position:relative;width:1920px; transform-origin:top left;will-change:transform; } .canvas *{position:absolute} /* ===== blocos de texto reutilizáveis ===== */ .eyebrow{ font-family:"Epilogue",sans-serif;font-weight:300; font-size:25px;letter-spacing:.06em;color:var(--eyebrow); text-transform:uppercase;line-height:22px; white-space:nowrap; } .body-25{ font-family:"Epilogue",sans-serif;font-weight:200; font-size:25px;line-height:35px;color:var(--text-2); } [data-theme="light"] .body-25{font-weight:300} .h-100{ font-family:"PP Migra",Georgia,serif;font-weight:400; font-size:99.929px;line-height:98.176px;color:var(--text); } .h-blue-117{ font-family:"PP Migra",Georgia,serif;font-weight:400; font-size:117.172px;line-height:102.526px;color:var(--blue); } .h-blue-67{ font-family:"PP Migra",Georgia,serif;font-weight:700; font-size:67px;line-height:102.526px;color:var(--blue); } /* Linhas horizontais */ .hr{ height:1px;background:var(--line-soft); width:2154px;left:-117px; } /* ===== Painéis translúcidos (só aparecem no light) ===== */ .tint-panel{ background:var(--panel); } /* ===== FOOTER ===== */ .footer-block{ left:-117px;width:2154px;height:651px; } .footer-block .big{ position:absolute;left:256px;top:0; font-family:"PP Migra",Georgia,serif;font-weight:700; font-size:125px;line-height:110px;letter-spacing:.02em; color:var(--blue-2);text-transform:uppercase;white-space:nowrap; } .footer-block .for{ position:absolute;left:258px;top:256px;width:506px; font-family:"PP Migra",Georgia,serif;font-weight:400; font-size:64px;line-height:56px;color:var(--text); } [data-theme="light"] .footer-block .for{color:var(--brand)} .footer-block .mail{ position:absolute;left:1220px;top:256px;width:670px; font-family:"PP Migra",Georgia,serif;font-weight:700; font-size:64px;line-height:56px;color:var(--text); } [data-theme="light"] .footer-block .mail{color:var(--brand)} .footer-block .hr-foot{ position:absolute;left:0;top:545px;width:2154px;height:1px;background:var(--line-soft); } .footer-block .laby{ position:absolute;left:252px;top:629px; font-family:"PP Migra",Georgia,serif;font-weight:700; font-size:25px;line-height:22px;letter-spacing:.06em; color:var(--nav);text-transform:uppercase;white-space:nowrap; } .footer-block .copy{ position:absolute;left:1369px;top:620px; font-family:"Epilogue",sans-serif;font-weight:300; font-size:25px;line-height:22px;letter-spacing:.04em; color:var(--eyebrow);text-transform:uppercase;white-space:nowrap; } /* ===== Mostrar/esconder por tema ===== */ [data-theme="dark"] .only-light{display:none} [data-theme="light"] .only-dark {display:none}