/* ============================================================ UNBOXTHINK — Global Header & Footer Styles Upload this file to your root via File Manager Then link it in every page's : ============================================================ */ /* ===== FONT IMPORT ===== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); /* ===== CSS VARIABLES ===== */ :root { --pale-dogwood: #F4CFC7; --light-coral: #E79798; --peach-fuzz: #FFBE98; --sunset: #FFC982; --sage: #C6C09C; --paper: #FAF7F1; --paper-dim: #F1E9DE; --ink: #211B16; --ink-80: rgba(33,27,22,.82); --ink-60: rgba(33,27,22,.62); --ink-40: rgba(33,27,22,.4); --ink-15: rgba(33,27,22,.15); --ink-08: rgba(33,27,22,.08); --display: 'Fraunces', serif; --body: 'Work Sans', sans-serif; --mono: 'Space Mono', monospace; --wrap: 1240px; --radius-s: 6px; --radius-m: 12px; --radius-l: 22px; --ease: cubic-bezier(.22,.61,.36,1); } /* ===== BASE ===== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ===== NAV / HEADER ===== */ #ubt-header .nav { position: sticky; top: 0; z-index: 9999; background: rgba(250, 247, 241, .86); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--ink-08); transition: padding .25s var(--ease); } #ubt-header .nav.is-scrolled .nav__inner { padding-top: 13px; padding-bottom: 13px; } .ubt-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 5vw, 56px); transition: padding .25s var(--ease); } /* Logo */ .ubt-logo { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } .ubt-logo__mark { width: 16px; height: 16px; border: 2px solid var(--ink); border-bottom: none; position: relative; flex-shrink: 0; } .ubt-logo__mark::after { content: ""; position: absolute; left: -2.5px; right: -2.5px; top: -1px; height: 2px; background: var(--light-coral); transform: rotate(-3deg); } .ubt-logo em { font-style: italic; color: inherit; font-weight: 500; } /* Nav links */ .ubt-nav__links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; } .ubt-nav__links a { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; position: relative; padding: 4px 0; color: var(--ink); text-decoration: none; } .ubt-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--light-coral); transition: right .25s var(--ease); } .ubt-nav__links a:hover::after { right: 0; } /* Nav actions */ .ubt-nav__actions { display: flex; align-items: center; gap: 10px; } /* Burger button */ .ubt-nav__burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } .ubt-nav__burger span { width: 20px; height: 2px; background: var(--ink); display: block; transition: transform .25s var(--ease), opacity .25s var(--ease); } .ubt-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ubt-nav__burger.is-open span:nth-child(2) { opacity: 0; } .ubt-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== FOOTER ===== */ #ubt-footer .footer { background: var(--ink); color: var(--paper); padding: 90px 0 34px; margin-top: 100px; } .ubt-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); } .ubt-footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: 60px; border-bottom: 1px solid rgba(250, 247, 241, .14); } .ubt-footer__wordmark { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--paper); line-height: 1; font-weight: 600; letter-spacing: -.01em; margin: 0; } .ubt-footer__tagline { font-family: var(--display); font-style: italic; color: rgba(250, 247, 241, .6); font-size: 1.2rem; margin-top: 10px; } .ubt-footer__signup { display: flex; gap: 0; border: 1.5px solid rgba(250, 247, 241, .35); border-radius: 999px; padding: 6px 6px 6px 22px; min-width: 340px; } .ubt-footer__signup input { background: transparent; border: none; color: var(--paper); flex: 1; padding: 10px 6px; font-family: var(--body); font-size: 1rem; } .ubt-footer__signup input::placeholder { color: rgba(250, 247, 241, .4); } .ubt-footer__signup input:focus { outline: none; } .ubt-footer__signup button { background: var(--sunset); color: var(--ink); border: none; border-radius: 999px; padding: 12px 22px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; cursor: pointer; transition: background .2s; white-space: nowrap; } .ubt-footer__signup button:hover { background: var(--peach-fuzz); } .ubt-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 56px 0; } .ubt-footer__col h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 247, 241, .45); margin-bottom: 18px; margin-top: 0; font-weight: 700; } .ubt-footer__col ul { list-style: none; margin: 0; padding: 0; } .ubt-footer__col ul li { margin-bottom: 12px; } .ubt-footer__col ul li a { color: rgba(250, 247, 241, .82); font-size: .92rem; text-decoration: none; transition: color .2s; } .ubt-footer__col ul li a:hover { color: var(--paper); text-decoration: underline; } .ubt-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 30px; border-top: 1px solid rgba(250, 247, 241, .1); font-size: .82rem; color: rgba(250, 247, 241, .45); font-family: var(--body); } .ubt-footer__dots { display: flex; gap: 7px; } .ubt-footer__dots span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* ===== MOBILE RESPONSIVE ===== */ @media (max-width: 880px) { .ubt-nav__links { position: fixed; top: 65px; left: 0; right: 0; bottom: 0; background: var(--paper); flex-direction: column; align-items: flex-start; gap: 0; padding: 10px clamp(20px, 5vw, 56px) 40px; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; z-index: 9998; } .ubt-nav__links.is-open { transform: translateX(0); } .ubt-nav__links a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--ink-08); font-size: .95rem; } .ubt-nav__burger { display: flex; } } @media (max-width: 760px) { .ubt-footer__signup { min-width: 0; width: 100%; } .ubt-footer__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ubt-footer__cols { grid-template-columns: 1fr; } }