/* ============================================================ PATENT BANK — sistema de design "cianótipo + ficha de arquivo" ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap'); :root{ /* --- tema padrão: azul-verde (cianótipo) --- */ --blueprint: #123B46; --blueprint-deep: #0B2830; --blueprint-line: rgba(210,240,235,0.14); --line-cyan: #D7F1EC; --line-cyan-dim: #86B7B0; /* --- papel de ficha (conteúdo) --- */ --paper: #F1ECDC; --paper-2: #E9E1CB; --paper-line: #CBBF9C; --ink: #201E17; --ink-dim: #5B5544; --card-bg: #FFFFFF; /* --- selos e anotações --- */ --brass: #B4863B; --brass-dark: #8C6626; --red: #9B3B2D; /* --- acentos por área --- */ --a-energia: #D6862A; --a-neuro: #7C5CC7; --a-ecologia: #3E8F5C; --a-tecnologia: #2E8FA3; --a-arte: #C24E77; } /* ============================================================ TEMAS — comutados via [data-theme] no ============================================================ */ /* explícito: mesmo conjunto do :root, para robustez */ [data-theme="bluegreen"]{ --blueprint:#123B46; --blueprint-deep:#0B2830; --blueprint-line:rgba(210,240,235,0.14); --line-cyan:#D7F1EC; --line-cyan-dim:#86B7B0; --paper:#F1ECDC; --paper-2:#E9E1CB; --paper-line:#CBBF9C; --ink:#201E17; --ink-dim:#5B5544; --card-bg:#FFFFFF; --brass:#B4863B; --brass-dark:#8C6626; --red:#9B3B2D; } [data-theme="dark"]{ --blueprint:#1A1A1D; --blueprint-deep:#101012; --blueprint-line:rgba(255,255,255,0.08); --line-cyan:#ECEAE4; --line-cyan-dim:#9C9A93; --paper:#242426; --paper-2:#2C2C2F; --paper-line:#3A3A3D; --ink:#EDEBE5; --ink-dim:#B7B4AC; --card-bg:#2A2A2C; --brass:#D3A55B; --brass-dark:#D3A55B; --red:#D9695A; } [data-theme="light"]{ --blueprint:#EFF3F6; --blueprint-deep:#E2E8ED; --blueprint-line:rgba(20,40,60,0.10); --line-cyan:#16273F; --line-cyan-dim:#4C5C70; --paper:#FFFFFF; --paper-2:#F5F1E6; --paper-line:#DED4B9; --ink:#201E17; --ink-dim:#5B5544; --card-bg:#FFFFFF; --brass:#B4863B; --brass-dark:#8C6626; --red:#9B3B2D; } [data-theme="lightbrown"]{ --blueprint:#E8DCC4; --blueprint-deep:#DCCBA8; --blueprint-line:rgba(90,60,20,0.14); --line-cyan:#3B2C1A; --line-cyan-dim:#6B5A3E; --paper:#FBF6EA; --paper-2:#F3E9D2; --paper-line:#D9C69C; --ink:#2E2113; --ink-dim:#6B5A3E; --card-bg:#FFFDF6; --brass:#9C6B2E; --brass-dark:#7A5220; --red:#8C3B2A; } :root{ --disp: 'Big Shoulders Display', sans-serif; --body: 'Source Serif 4', Georgia, serif; --sans: 'IBM Plex Sans', Arial, sans-serif; --mono: 'IBM Plex Mono', 'Courier New', monospace; --radius: 2px; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; font-size: 16px; } html[data-fontsize="small"]{ font-size: 15px; } html[data-fontsize="medium"]{ font-size: 16px; } html[data-fontsize="large"]{ font-size: 18.5px; } html[data-fontsize="xlarge"]{ font-size: 21px; } html[data-font="editorial"]{ --disp: 'Big Shoulders Display', sans-serif; --body: 'Source Serif 4', Georgia, serif; --sans: 'IBM Plex Sans', Arial, sans-serif; } html[data-font="sans"]{ --disp: 'Space Grotesk', Arial, sans-serif; --body: 'Inter', Arial, sans-serif; --sans: 'Inter', Arial, sans-serif; } html[data-font="legivel"]{ --disp: 'Atkinson Hyperlegible', Arial, sans-serif; --body: 'Atkinson Hyperlegible', Arial, sans-serif; --sans: 'Atkinson Hyperlegible', Arial, sans-serif; } body{ margin:0; background: var(--blueprint); color: var(--line-cyan); font-family: var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--brass); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ---------- fundo técnico (graph paper) ---------- */ .blueprint-field{ background-image: linear-gradient(var(--blueprint-line) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px); background-size: 34px 34px; background-color: var(--blueprint); } /* ---------- cantos de prancheta técnica ---------- */ .draft-corners{ position:relative; } .draft-corners::before, .draft-corners::after{ content:""; position:absolute; width:22px; height:22px; border: 1.5px solid var(--brass); opacity:.75; } .draft-corners::before{ top:0; left:0; border-right:none; border-bottom:none; } .draft-corners::after{ bottom:0; right:0; border-left:none; border-top:none; } /* ---------- nav ---------- */ .site-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding: 18px 5vw; background: var(--blueprint-deep); border-bottom: 1px solid var(--blueprint-line); } .brand{ display:flex; align-items:center; gap:10px; font-family: var(--disp); font-weight:700; letter-spacing:.04em; text-decoration:none; color:var(--line-cyan); font-size:1.15rem; text-transform:uppercase; } .brand .seal{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.6rem; color:var(--brass); } .nav-right{ display:flex; align-items:center; gap:6px; position:relative; } .nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; flex-wrap:wrap; } .nav-links a{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--line-cyan-dim); padding-bottom:3px; border-bottom:1px solid transparent; transition: color .15s ease, border-color .15s ease; } .nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--line-cyan); border-color: var(--brass); } .nav-toggle{ display:none; } /* ---------- seletor de tema ---------- */ .theme-switcher{ display:flex; align-items:center; gap:8px; margin-left:16px; padding-left:16px; border-left:1px solid var(--blueprint-line); } .theme-swatch{ width:20px; height:20px; border-radius:50%; padding:0; border:1.5px solid var(--blueprint-line); cursor:pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .theme-swatch:hover{ transform: translateY(-1px); } .theme-swatch.is-active{ border-color: var(--brass); box-shadow: 0 0 0 2px var(--blueprint-deep), 0 0 0 3px var(--brass); } /* ---------- painel de texto (Aa) ---------- */ .text-settings{ position:relative; margin-left:16px; padding-left:16px; border-left:1px solid var(--blueprint-line); } .text-settings summary{ list-style:none; cursor:pointer; user-select:none; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--line-cyan-dim); border:1px solid var(--blueprint-line); padding:5px 11px; border-radius:2px; transition: color .15s ease, border-color .15s ease; } .text-settings summary::-webkit-details-marker{ display:none; } .text-settings summary::marker{ content:""; } .text-settings[open] summary, .text-settings summary:hover{ color:var(--line-cyan); border-color:var(--brass); } .text-settings-panel{ position:absolute; right:0; top:calc(100% + 10px); background:var(--blueprint-deep); border:1px solid var(--blueprint-line); padding:16px; width:230px; max-width:82vw; z-index:60; display:flex; flex-direction:column; gap:16px; } .text-settings-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:8px; } .size-buttons, .font-buttons{ display:flex; gap:6px; flex-wrap:wrap; } .size-buttons button, .font-buttons button{ font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; background:transparent; border:1px solid var(--blueprint-line); color:var(--line-cyan-dim); padding:6px 9px; cursor:pointer; border-radius:2px; transition: color .15s ease, border-color .15s ease; } .font-buttons button{ flex:1 1 auto; text-align:center; } .size-buttons button.is-active, .font-buttons button.is-active, .size-buttons button:hover, .font-buttons button:hover{ color:var(--line-cyan); border-color:var(--brass); } @media (max-width: 760px){ .theme-switcher{ margin-left:12px; padding-left:12px; } .text-settings{ margin-left:12px; padding-left:12px; } } /* ---------- painel de idioma ---------- */ .lang-settings{ position:relative; margin-left:16px; padding-left:16px; border-left:1px solid var(--blueprint-line); } .lang-settings summary{ list-style:none; cursor:pointer; user-select:none; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--line-cyan-dim); border:1px solid var(--blueprint-line); padding:5px 11px; border-radius:2px; min-width:2.6em; text-align:center; transition: color .15s ease, border-color .15s ease; } .lang-settings summary::-webkit-details-marker{ display:none; } .lang-settings summary::marker{ content:""; } .lang-settings[open] summary, .lang-settings summary:hover{ color:var(--line-cyan); border-color:var(--brass); } .lang-panel{ position:absolute; right:0; top:calc(100% + 10px); background:var(--blueprint-deep); border:1px solid var(--blueprint-line); padding:10px; width:180px; max-width:82vw; z-index:60; display:flex; flex-direction:column; gap:2px; } .lang-panel button{ font-family:var(--sans); font-size:.84rem; text-align:left; background:transparent; border:1px solid transparent; color:var(--line-cyan-dim); padding:8px 10px; cursor:pointer; border-radius:2px; transition: color .15s ease, border-color .15s ease, background .15s ease; } .lang-panel button.is-active, .lang-panel button:hover{ color:var(--line-cyan); border-color:var(--brass); background:rgba(255,255,255,0.04); } @media (max-width: 760px){ .lang-settings{ margin-left:12px; padding-left:12px; } } @media (max-width: 760px){ .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background: var(--blueprint-deep); border-bottom:1px solid var(--blueprint-line); max-height:0; overflow:hidden; } .nav-links.open{ max-height:400px; } .nav-links a{ padding:14px 5vw; border-bottom:1px solid var(--blueprint-line); } .nav-toggle{ display:block; background:none; border:1px solid var(--brass); color:var(--brass); font-family:var(--mono); padding:6px 10px; cursor:pointer; } } /* ---------- eyebrow / etiquetas mono ---------- */ .eyebrow{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); } /* ---------- hero ---------- */ .hero{ padding: 64px 5vw 40px; } .hero h1{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:.98; letter-spacing:.01em; margin:.3em 0 .3em; color:var(--line-cyan); max-width:16ch; } .hero .lede{ max-width:62ch; color:var(--line-cyan-dim); font-family:var(--body); font-size:1.1rem; } /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:12px 20px; text-decoration:none; border-radius:var(--radius); border:1px solid var(--brass); color:var(--blueprint-deep); background:var(--brass); transition: transform .15s ease, background .15s ease; } .btn:hover{ background:#c99a4c; transform:translateY(-1px); } .btn.ghost{ background:transparent; color:var(--line-cyan); border-color:var(--line-cyan-dim); } .btn.ghost:hover{ border-color:var(--brass); color:var(--brass); } /* ---------- painel de entrevista ---------- */ .interview{ max-width:840px; margin: 46px auto 0; padding: 0 5vw; border-left: 1px solid var(--blueprint-line); } .interview .turn{ position:relative; padding: 0 0 30px 26px; } .interview .turn::before{ content:""; position:absolute; left:-4.5px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--brass); } .interview .who{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:6px; display:block; } .interview .q{ color: var(--line-cyan); font-family:var(--sans); font-weight:600; } .interview .a{ color: var(--line-cyan-dim); font-family:var(--body); margin-top:8px; font-size:1.02rem; } /* ---------- secções em papel ---------- */ .paper-section{ background: var(--paper); color: var(--ink); padding: 64px 5vw; } .paper-section h2{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin:.2em 0 .5em; color:var(--ink); } .paper-section .eyebrow{ color:var(--brass-dark); } .paper-section .eyebrow::before{ background:var(--brass-dark); } .paper-section p{ font-family:var(--body); max-width:70ch; color:var(--ink-dim); } .section-inner{ max-width:1180px; margin:0 auto; } /* ---------- grelha das 5 áreas ---------- */ .areas-grid{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top: 34px; } .area-card{ background: var(--paper); color:var(--ink); border:1px solid var(--paper-line); padding: 22px 22px 24px; position:relative; } .area-card .area-num{ font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); position:absolute; top:14px; right:16px; } .area-card h3{ font-family:var(--disp); text-transform:uppercase; font-size:1.55rem; margin:6px 0 4px; letter-spacing:.01em; } .area-card p{ font-family:var(--body); font-size:.92rem; color:var(--ink-dim); margin:0 0 16px; } .blocks4{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .blocks4 a{ display:block; text-decoration:none; color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:12px 10px; min-height:52px; display:flex; align-items:flex-end; transition: filter .15s ease, transform .15s ease; } .blocks4 a:hover{ filter:brightness(1.12); transform:translateY(-2px); } .area-card.energia .blocks4 a{ background:var(--a-energia); } .area-card.neuro .blocks4 a{ background:var(--a-neuro); } .area-card.ecologia .blocks4 a{ background:var(--a-ecologia); } .area-card.tecnologia .blocks4 a{ background:var(--a-tecnologia); } .area-card.arte .blocks4 a{ background:var(--a-arte); } .area-card .go{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-dark); text-decoration:none; border-bottom:1px solid var(--brass-dark); } /* ---------- ficha de conceito (com "carimbo") ---------- */ .concept-grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); margin-top: 30px; } .concept-card{ background: var(--card-bg); border:1px solid var(--paper-line); padding:22px; position:relative; overflow:hidden; } .concept-card .ref{ font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); } .concept-card h4{ font-family:var(--disp); text-transform:uppercase; font-size:1.25rem; margin:.25em 0 .5em; letter-spacing:.005em; } .concept-card .field{ font-family:var(--body); font-size:.94rem; color:var(--ink-dim); margin:0 0 10px; } .concept-card .field b{ color:var(--ink); font-weight:600; } .stamp{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; border:1.5px dashed var(--brass-dark); color:var(--brass-dark); padding:6px 10px; margin-top:14px; transform:rotate(-3deg); font-family:var(--mono); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; line-height:1.3; } /* ---------- serviços ---------- */ .service-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); margin-top:30px; } .service-card{ border:1px solid var(--paper-line); background:var(--paper-2); padding:22px; } .service-card .num{ font-family:var(--disp); font-size:2rem; color:var(--brass-dark); line-height:1; } .service-card h3{ font-family:var(--disp); text-transform:uppercase; font-size:1.2rem; margin:.4em 0 .3em; } .service-card p{ font-family:var(--body); font-size:.92rem; color:var(--ink-dim); } /* ---------- tabela / lista técnica ---------- */ .spec-list{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--paper-line); } .spec-list li{ display:grid; grid-template-columns: 140px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--paper-line); font-family:var(--body); } .spec-list .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-dark); } /* ---------- callout / aviso ---------- */ .callout{ border-left:3px solid var(--brass-dark); background:var(--paper-2); padding:16px 20px; margin-top:30px; font-family:var(--body); font-size:.92rem; color:var(--ink-dim); max-width:70ch; } /* ---------- rodapé ---------- */ footer{ background: var(--blueprint-deep); color:var(--line-cyan-dim); padding: 40px 5vw 30px; font-family:var(--mono); font-size:.72rem; border-top:1px solid var(--blueprint-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } footer a{ color:var(--line-cyan-dim); text-decoration:none; } footer a:hover{ color:var(--brass); } /* ---------- reveal on scroll ---------- */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; } .reveal.in{ opacity:1; transform:none; } /* ---------- página de área: header colorido ---------- */ .area-hero{ padding:70px 5vw 50px; position:relative; } .area-hero .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; display:inline-block; color:#fff; margin-bottom:14px; } .area-hero h1{ font-family:var(--disp); text-transform:uppercase; font-size:clamp(2.2rem,5.6vw,4rem); margin:.15em 0 .3em; color:var(--line-cyan); line-height:.98; } .area-hero p{ max-width:60ch; color:var(--line-cyan-dim); font-family:var(--body); font-size:1.05rem; } .tag.energia, .concept-card.energia .ref{ background:var(--a-energia); } .tag.neuro{ background:var(--a-neuro); } .tag.ecologia{ background:var(--a-ecologia); } .tag.tecnologia{ background:var(--a-tecnologia); } .tag.arte{ background:var(--a-arte); } .accent-energia{ color:var(--a-energia); } .accent-neuro{ color:var(--a-neuro); } .accent-ecologia{ color:var(--a-ecologia); } .accent-tecnologia{ color:var(--a-tecnologia); } .accent-arte{ color:var(--a-arte); }