Spacing and Shape
--radius: 4px /* Buttons, tags, small elements */
--radius-lg: 10px /* Cards, modals, dropdowns, image containers */
Motion
--transition: 0.26s cubic-bezier(0.4,0,0.2,1) /* All hover/state transitions */
Typography
Typography
Z-Index Scale
10 /* Divi editor override */
1000 /* Mega menus, dropdowns */
99997 /* Nav overlay */
99998 /* Nav drawer */
99999 /* Nav bar itself */
Nav Index Scale
10 /* Divi editor override */
1000 /* Mega menus, dropdowns */
99997 /* Nav overlay */
99998 /* Nav drawer */
99999 /* Nav bar itself */
Section max-width & padding โ matching your nav and footer:
max-width: 1360px; /* Wide content (nav inner) */
max-width: 1200px; /* Standard content (footer inner) */
margin: 0 auto;
padding: 0 36px; /* Desktop */
padding: 0 24px; /* Mobile */
Section vertical rhythm:
padding: 72px 40px; /* Large sections (matches footer) */ padding: 56px 24px; /* Mobile */
Red CTA button โ matches .nav-store-btn:
background: var(--red);
color: var(--white);
font-size: 16px;
font-weight: 700;
padding: 10px 22px;
border-radius: var(--radius);
transition: background var(--transition)
transform var(--transition)
box-shadow var(--transition);
/* Hover: */
background: var(--red-dark);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(233,44,77,0.35);
Card style โ consistent with mega menu and drawer:
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
Section accent bar โ matches footer top border:
height: 4px;
background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--red) 100%);
Eyebrow label โ matches .mega-col-header and .footer-col h4:
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--red); /* on light backgrounds */
color: var(--yellow); /* on dark backgrounds */
border-bottom: 2px solid var(--yellow); padding-bottom: 8px;
Dark section text colours:
color: var(--white); /* Headings */
color: rgba(255,255,255,0.45); /*
Body copy */ color: rgba(255,255,255,0.50); /*
Links */ color: rgba(255,255,255,0.30); /*
Legal / fine print */ border: 1px solid rgba(255,255,255,0.10); /* Borders on dark */
background: rgba(255,255,255,0.06); /* Subtle dark-bg cards */
STAY INFORMED
Get the Latest News and Offers!
Join thousands of schools and community organisations who receive our updates โ new products, special offers and education resources every month.
GET IN TOUCH
Let's create something great together!
Whether you have a specific project in mind or just want to explore what's possible, our friendly team is ready to help.
PHONE
in**@***************om.au
WEBSITE
www.academicmedia.com.au
OPEN
8:30 AM - 4:30 PM
Send us a message
Caption text goes here to build trust
H1 hear text appears only once on the page.
Paragraph text appears under the main H1 hero heading to add a little more context
$45.00
Image caption can go here
Browse by category
Find what your looking for
500+ schools and organisations
Australia's most down-to-earth
school product suplier
WHAT WE DO
Products built for schools and communities
Paragraph goes here. This is a text block that you can replace with whatever you like. If your paragraph is very long, well then it is good to use another paragraph like
Card Title
Paragraph goes here. This is a text block that yoeading like so:
Card Link
Card Title
Paragraph goes here. This is a text block that yoeading like so:
Card Link
Card Title
Paragraph goes here. This is a text block that yoeading like so:
Card Link
Card Title
Paragraph goes here. This is a text block that yoeading like so:
Card Link
Article Author
H2 Article Title
Article Date or time to read the article
Paragraph goes here. This is a text block that you can replace with whatever you like. If your paragraph is very long, well then it is good to use another paragraph like so.
Pressing the enter key, give you another paragraph. However if the article requires many paragraphs it is best to sub-divide the article with an H3 heading like so:
H3 Article Heading
H3 article headings allow the reader to understand the different sections within the article. There will only ever be one H2 heading per article, but you are able to have many H3 headings.
H3 Article Heading
H3 article headings allow the reader to understand the different sections within the article. There will only ever be one H2 heading per article, but you are able to have many H3 headings.
Read more / Next / etc...
Article Author
H2 Article Title
Article Date or time to read the article
Paragraph goes here. This is a text block that you can replace with whatever you like. If your paragraph is very long, well then it is good to use another paragraph like so.
Pressing the enter key, give you another paragraph. However if the article requires many paragraphs it is best to sub-divide the article with an H3 heading like so:
