/* =========================================================== Portfolio Design System — Unified standards across all pages Loaded LAST in to consolidate brand, footer, cards, buttons, links and a few page-specific polish rules. Keep edits here instead of duplicating overrides in pages. =========================================================== */ /* --- Brand (Isabela.) ----------------------------------------- */ .brand, nav .brand, .nav .brand{ font-family:"Satoshi","Work Sans",system-ui,sans-serif; font-size:14px; line-height:1; font-weight:500; letter-spacing:-0.02em; color:#1F1F1F; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:0; } .brand .brand-period, nav .brand .brand-period, .nav .brand .brand-period{ color:#FF7167; } nav .brand::after,.nav .brand::after, nav .brand-mark,nav .brand-icon,nav .brand-dot, .nav .brand-mark,.nav .brand-icon,.nav .brand-dot{ display:none !important; content:none !important; } /* --- Footer (consistent across every page) -------------------- */ footer, footer.footer{ border-top:1px solid rgba(202,213,225,.55); padding:34px 0 38px; color:#9AA6B3; font-size:12px; font-family:"Work Sans",system-ui,sans-serif; font-weight:300; letter-spacing:.01em; background:transparent; } footer .footer-inner, footer.footer .footer-inner{ width:min(100% - 48px, 1240px); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; } footer .footer-inner p, footer.footer .footer-inner p{ margin:0; color:#9AA6B3; font-size:12px; letter-spacing:.02em; } footer .footer-inner a, footer.footer .footer-inner a{ color:#1F1F1F; font-size:12px; letter-spacing:.02em; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease; } footer .footer-inner a:hover, footer.footer .footer-inner a:hover{ border-bottom-color:#1F1F1F; } footer .footer-inner em, footer.footer .footer-inner em{ font-family:"Satoshi",system-ui,sans-serif; font-style:italic; color:#9AA6B3; font-size:12px; } /* --- Smooth subtle link hover everywhere ---------------------- */ a{ transition:color .3s ease, opacity .3s ease; } /* --- Tags / pills shared shape -------------------------------- */ .tag,.pill{ font-family:"Work Sans",system-ui,sans-serif; font-weight:400; font-size:11px; letter-spacing:.02em; } /* --- Terpafy: Significados (perfect alignment) ---------------- */ #sistema .meaning-cards{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:22px !important; align-items:stretch !important; } #sistema .meaning-card{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; text-align:center !important; padding:28px 24px 30px !important; height:360px !important; min-height:360px !important; border-radius:28px !important; } #sistema .meaning-badge{ display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; margin:0 auto 22px !important; } #sistema .meaning-badge-icon{ width:28px !important; height:28px !important; object-fit:contain !important; display:block !important; opacity:.85 !important; } #sistema .meaning-illustration{ width:108px !important; height:108px !important; min-width:108px !important; max-width:108px !important; min-height:108px !important; max-height:108px !important; margin:0 auto 26px !important; object-fit:contain !important; display:block !important; } #sistema .meaning-card h3{ font-size:16px !important; line-height:1.3 !important; letter-spacing:-.01em !important; font-weight:500 !important; margin:0 0 8px !important; color:#1F1F1F !important; } #sistema .meaning-card p{ font-size:13px !important; line-height:1.55 !important; color:#747F8B !important; max-width:220px !important; margin:0 auto !important; } @media(max-width:760px){ #sistema .meaning-cards{ grid-template-columns:1fr !important; max-width:380px !important; margin-inline:auto !important; } #sistema .meaning-card{ height:auto !important; min-height:0 !important; } } /* --- Terpafy: Palette section (cards left, detail right) ----- */ #cores .palette-layout{ display:grid !important; grid-template-columns:1.05fr .95fr !important; gap:36px !important; align-items:stretch !important; max-width:1100px !important; margin-inline:auto !important; } #cores .palette-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important; align-content:start !important; } #cores .color-detail{ position:sticky; top:24px; align-self:start; min-height:360px; border-radius:28px !important; padding:30px !important; display:flex !important; flex-direction:column !important; gap:20px !important; } #cores .color-preview{ width:100% !important; height:140px !important; border-radius:18px !important; flex:none !important; } @media(max-width:900px){ #cores .palette-layout{ grid-template-columns:1fr !important; } #cores .color-detail{ position:relative; top:0; } } /* --- Empty gallery placeholder (Terpafy aplicações) ---------- */ .empty-gallery{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:32px; padding:46px 28px; margin-top:32px; min-height:240px; } .empty-gallery-mark{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:#1F1F1F; color:#F9F9F9; font-size:20px; margin-bottom:18px; } .empty-gallery h3{ font-size:22px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px; } .empty-gallery p{ font-size:13.5px; line-height:1.6; color:#747F8B; max-width:460px; } /* --- 13" laptop polish (max-width:1366) ---------------------- */ @media(max-width:1366px){ .container{ width:min(100% - 48px, 1180px) !important; } body:not(.home-page) .hero h1{ font-size:clamp(30px, 3.4vw, 46px) !important; } .section{ padding-top:72px !important; padding-bottom:72px !important; } } /* --- Reduced motion respect ---------------------------------- */ @media(prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }