/* ------------------------- OCEAN / SEA THEME CORE --------------------------*/ :root{ /* Deep sea to turquoise palette */ --bg:#061026; /* abyssal navy */ --card:#0b1e33; /* deep blue card */ --text:#ebfbff; /* foam white */ --muted:#9ed3e6; /* misty aqua */ --brand:#0ea5e9; /* cerulean */ --brand-2:#22d3ee; /* bright aqua */ --accent:#35f4c5; /* seafoam pop */ --warning:#ff7a59; /* coral (contrast accent) */ --maxw:1100px; --radius:16px; /* FX */ --glow:0 0 0 rgba(34,211,238,0); } /* Background: animated ocean gradient */ @keyframes oceanShift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%;} 100% { background-position: 0% 0%; } } body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 600px at 10% 10%, rgba(34,211,238,.10), transparent 60%), radial-gradient(900px 500px at 90% 30%, rgba(14,165,233,.12), transparent 60%), linear-gradient(180deg,#061026 0%, #0a1831 40%, #05283a 100%); background-size: 180% 180%; animation: oceanShift 18s ease-in-out infinite; } /* Container & spacing (unchanged) */ .container { width:min(92%,var(--maxw)); margin:0 auto; } .section { padding:4.5rem 0; } .hero { padding:6rem 0 4rem; } /* ------------------------- BRANDING --------------------------*/ .logo { font-weight:900; font-size:1.25rem; letter-spacing:.02em; } .logo span { color:var(--brand-2); text-shadow: 0 0 18px rgba(34,211,238,.45), 0 0 2px rgba(34,211,238,.75); } /* ------------------------- VIBRANT, OUTSTANDING HEADER (You said you have a .site-header class—here it is) --------------------------*/ .site-header{ position: sticky; top:0; z-index:1000; /* glassy gradient bar with subtle wave texture */ background: linear-gradient(180deg, rgba(6,16,38,.75), rgba(6,16,38,.55)) padding-box; -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(34,211,238,.25); box-shadow: 0 2px 20px rgba(11,149,197,.15), inset 0 -1px 0 rgba(255,255,255,.06); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; } /* MAKE HEADER TEXT ALL CAPS & BOLD */ .site-header, .site-header *{ text-transform:uppercase; letter-spacing:.06em; } /* Big, vibrant site title option (if you use .site-title) */ .site-title{ font-weight:1000; font-size:1rem; line-height:1; background: linear-gradient(90deg, var(--brand-2), var(--accent), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 22px rgba(34,211,238,.45); } /* NAV */ .nav{ display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; } .nav a{ color:var(--text); text-decoration:none; font-weight:800; font-size:.82rem; opacity:.92; position:relative; padding:.25rem .35rem; border-radius:10px; } .nav a::after{ content:""; position:absolute; left:8%; right:8%; bottom:-2px; height:2px; background: linear-gradient(90deg, transparent, var(--brand-2), transparent); opacity:.0; transform:translateY(2px); transition:all .25s ease; } .nav a:hover, .nav a:focus-visible{ opacity:1; background:linear-gradient(180deg, rgba(34,211,238,.12), transparent); outline:none; } .nav a:hover::after, .nav a:focus-visible::after{ opacity:1; transform:translateY(0); } /* Optional CTA in header */ .site-header .btn{ font-size:.78rem; padding:.55rem .9rem; } /* ------------------------- BUTTONS --------------------------*/ .btn{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#001018; font-weight:900; padding:.72rem 1.05rem; border-radius:999px; display:inline-block; border:1px solid rgba(34,211,238,.6); box-shadow: 0 8px 24px rgba(34,211,238,.25), inset 0 0 0 1px rgba(255,255,255,.2); transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover{ transform: translateY(-1px); filter: saturate(115%); } .btn:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(34,211,238,.25); } .btn-outline{ background:transparent; border:1px solid rgba(34,211,238,.6); color:var(--text); } .btn-outline:hover{ background:linear-gradient(90deg, rgba(34,211,238,.18), rgba(14,165,233,.18)); } /* ------------------------- CARDS --------------------------*/ .card{ background: linear-gradient(180deg, rgba(11,30,51,.85), rgba(11,30,51,.65)) border-box; border-radius:var(--radius); padding:1rem; border:1px solid rgba(34,211,238,.18); box-shadow: 0 12px 30px rgba(5,40,58,.45), inset 0 0 0 1px rgba(255,255,255,.04); } .card:hover{ box-shadow: 0 16px 40px rgba(5,40,58,.55), inset 0 0 0 1px rgba(255,255,255,.05); } /* ------------------------- GALLERY --------------------------*/ .gallery{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .gallery > *{ border-radius:calc(var(--radius) - 6px); overflow:hidden; transform: translateZ(0); box-shadow: 0 8px 22px rgba(14,165,233,.15); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .gallery > *:hover{ transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 34px rgba(14,165,233,.25); filter: saturate(110%); } /* ------------------------- TYPOGRAPHY & LINKS --------------------------*/ h1,h2,h3{ font-weight:1000; letter-spacing:.02em; line-height:1.1; } h1{ font-size: clamp(2rem, 4vw + 1rem, 3.5rem); background: linear-gradient(90deg, var(--brand-2), var(--accent)); -webkit-background-clip: text; background-clip:text; color:transparent; text-shadow: 0 0 24px rgba(34,211,238,.35); text-transform:uppercase; } a{ color:var(--brand-2); } a:hover{ color:var(--accent); } /* ------------------------- UTILITY: MAX-WIDTH SECTION DIVIDER --------------------------*/ .divider{ height:1px; width:100%; background: linear-gradient(90deg, transparent, rgba(34,211,238,.35), transparent); margin:2rem 0; } /* ------------------------- ACCESSIBILITY TWEAKS --------------------------*/ :focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; } /* ------------------------- OPTIONAL: SUBTLE SURFACE WAVES (apply .waves to any section for a watery sheen) --------------------------*/ .waves{ position:relative; isolation:isolate; } .waves::after{ content:""; position:absolute; inset:-1px; z-index:-1; background: radial-gradient(1000px 120px at 10% 0%, rgba(34,211,238,.10), transparent 60%), radial-gradient(900px 120px at 80% 0%, rgba(14,165,233,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); mask: linear-gradient(180deg, rgba(0,0,0,.25), transparent 65%); border-radius: inherit; }