/*======================================================
OLIVER RIDLEY
BASE STYLESHEET

 
Shared across every page.
Contains:
    • Google Fonts
    • CSS Variables
    • Reset
    • Global Typography
    • Sections
    • Buttons
    • Forms
    • Cards
    • Scrollbar
    • Responsive Utilities
 

======================================================*/

/*======================================================
GOOGLE FONTS
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&family=Shadows+Into+Light&display=swap');

/*======================================================
ROOT VARIABLES
======================================================*/

:root{

 
--background:#06080d;
--background-light:#0f1520;

--surface:rgba(255,255,255,.05);
--surface-hover:rgba(255,255,255,.08);

--border:rgba(255,255,255,.08);

--white:#ffffff;

--text:#d9d9d9;
--text-light:#a9adb8;


/*==================================================
    GLOBAL ACCENT SYSTEM

    Each page can override --page-accent
    to create its own colour theme.
==================================================*/

--blue:#4e7fff;
--blue-hover:#6994ff;

--pink:#ff4fa8;

--page-accent:var(--blue);


--radius-small:18px;
--radius-large:30px;

--shadow:

    0 20px 50px rgba(0,0,0,.30);

--transition:

    .35s ease;
 

}

/*======================================================
RESET
======================================================*/

*{

 
margin:0;
padding:0;
box-sizing:border-box;
 

}

html{

 
scroll-behavior:smooth;
 

}

body{

 
background:
radial-gradient(
    circle at top right,
    #16396e 0%,
    #08111b 30%,
    #06080d 70%
);

background-attachment:fixed;

color:var(--white);

font-family:'Inter',sans-serif;

overflow-x:hidden;
 

}

/*======================================================
GLOBAL ELEMENTS
======================================================*/

img{

 
display:block;

max-width:100%;
 

}

a{

 
color:inherit;

text-decoration:none;
 

}

ul{

 
list-style:none;
 

}

section{

 
padding:120px 8%;
 

}

main{

 
padding-top:100px;
 

}

/*======================================================
TYPOGRAPHY
======================================================*/

h1{

 
font-family:'Cormorant Garamond',serif;

font-size:5rem;

line-height:1;

font-weight:600;

margin-bottom:25px;
 

}

h2{

 
font-family:'Cormorant Garamond',serif;

font-size:3.5rem;

font-weight:600;

display:inline-block;

position:relative;

margin-bottom:30px;
 

}

/*======================================================
UNIVERSAL HEADING UNDERLINE

 
Automatically:
    • Fits the heading
    • Uses the page accent colour
    • Glows with the same colour

Default = blue

Individual pages can override:
    --page-accent
 

======================================================*/

h2::after{

 
content:"";

position:absolute;

left:0;

bottom:-12px;

width:100%;

height:4px;

background:var(--page-accent);

border-radius:50px;

box-shadow:
    0 0 12px
    color-mix(
        in srgb,
        var(--page-accent) 55%,
        transparent
    );
 

}

h3{

 
font-size:1.8rem;

font-weight:600;

margin-bottom:15px;
 

}

p{

 
color:var(--text);

line-height:1.9;

font-size:1.05rem;
 

}

/*======================================================
SMALL SECTION LABEL
======================================================*/

.small-title{

 
display:inline-block;

color:var(--page-accent);

font-size:.85rem;

font-weight:700;

letter-spacing:5px;

text-transform:uppercase;

margin-bottom:18px;
 

}

/*======================================================
BUTTONS
======================================================*/

.button,
button{

 
display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 44px;

border:none;

border-radius:999px;

background:var(--page-accent);

color:white;

font-size:.9rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

cursor:pointer;

transition:var(--transition);
 

}

.button:hover,
button:hover{

 
background:
    color-mix(
        in srgb,
        var(--page-accent) 80%,
        white
    );

transform:translateY(-3px);

box-shadow:

    0 15px 40px
    color-mix(
        in srgb,
        var(--page-accent) 35%,
        transparent
    );
 

}

/*======================================================
GLASS CARD
======================================================*/

.glass{

 
background:var(--surface);

backdrop-filter:blur(18px);

border:1px solid var(--border);

border-radius:var(--radius-large);

box-shadow:var(--shadow);
 

}

/*======================================================
FORM ELEMENTS
======================================================*/

input,
textarea{

 
width:100%;

padding:18px 22px;

border-radius:16px;

border:1px solid var(--border);

background:rgba(255,255,255,.04);

color:white;

font-family:inherit;

font-size:1rem;

transition:var(--transition);
 

}

input::placeholder,
textarea::placeholder{

 
color:#8e96a8;
 

}

textarea{

 
resize:vertical;

min-height:180px;
 

}

input:focus,
textarea:focus{

 
outline:none;

border-color:var(--page-accent);

box-shadow:

    0 0 25px
    color-mix(
        in srgb,
        var(--page-accent) 25%,
        transparent
    );
 

}

/*======================================================
CUSTOM SCROLLBAR
======================================================*/

::-webkit-scrollbar{

 
width:10px;
 

}

::-webkit-scrollbar-track{

 
background:#06080d;
 

}

::-webkit-scrollbar-thumb{

 
background:var(--page-accent);

border-radius:100px;
 

}

::-webkit-scrollbar-thumb:hover{

 
background:
    color-mix(
        in srgb,
        var(--page-accent) 80%,
        white
    );
 

}

/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:1000px){

 
h1{

    font-size:4rem;

}

h2{

    font-size:3rem;

}
 

}

@media (max-width:700px){

 
section{

    padding:90px 30px;

}

h1{

    font-size:3rem;

}

h2{

    font-size:2.5rem;

}
 

}