/* file: style.css
 * desc: Stylesheet for sycamorecarpentry.com
 * hist: 06-Jun-2025 - initial version
 */

 @import url('reset.css');

/* MARK: 01 - FONTS AND COLORS                                                 \
/* Color pallete, font, etc. settings.                                         \
 */

 @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root {
  /* -- color pallet -------------------------------------------------------- */
	--light        : #e4dfc7       ; /*                                       */
	--dark         : #7d8f83       ; /*                                       */
  --dark2        : #7d808f       ; /* light green background                */
  --accent       : #cc3333       ; /* light green background                */
}

/* MARK: 02 - ARTICLE STYLES                                                   \
 * Styling for specific articles by identifier.                                \
 */
#landing {
  background-image: 
   radial-gradient(ellipse, #0000, #0007),
   linear-gradient(0deg, #551, #555),
   url('../media/noise.svg'),
   url('../media/home.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: soft-light;
  filter: blur(0.05em) saturate(0.8) contrast(1.2) brightness(1.0);
  padding-top: 10%;
}

#about {
	background-image: 
	 radial-gradient(ellipse, #0000, #0007),
   linear-gradient(0deg, #551, #555),
   url('../media/noise.svg'),
	 url('../media/wood.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: soft-light;
}

#services {
	background-image: 
	 radial-gradient(ellipse, #0000, #0007),
   linear-gradient(0deg, #551, #555),
   url('../media/noise.svg'),
	 url('../media/tree2.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: soft-light;
}

#contact > section > form > input[name="email"] {
	grid-column: 1 / 3;
}

#contact > section > form > textarea {
	grid-column: 1 / 3;
}

/* MARK: 03 - BASIC HTML ELEMENT STYLES                                        \
 * Basic styles for commonly used elements in this template.                   \
 */

html {
	height         : 100%          ; /*                                         */
}

body {
	height         : 100%          ; /*                                         */
  
	font-family    : "Roboto", sans-serif
	                               ; /*                                         */
	font-weight    : 300           ; /*                                         */
	background     : var(--dark)   ; /*                                         */
	color          : var(--dark)   ; /*                                         */

	scroll-behavior: smooth        ; /* use smooth scrolling by default         */
}

a {
	color          : var(--accent) ; /*                                         */
	text-decoration: none          ; /*                                         */
}

h1, h2, h3, h4, h5, h6 {
	font-weight    : 900           ; /*                                         */
	color          : inherit       ; /*                                         */
}

h1 { font-size     : 4.00rem ; }   /*                                         */
h2 { font-size     : 3.00rem ; }   /*                                         */
h3 { font-size     : 2.50rem ; }   /*                                         */
h4 { font-size     : 1.50rem ; }   /*                                         */
p  { font-size     : 1.00rem ; }   /*                                         */

ul { list-style    : none    ; }   /*                                         */

footer {
	background     : var(--dark2)  ; /*                                         */
	color          : var(--light)  ; /*                                         */
	padding        : 1.50rem       ; /*                                         */
	text-align     : right         ; /*                                         */
}

article {
	min-height     : 100%          ; /*                                         */
}

form {
	display        : grid          ; /*                                         */
	grid-template-columns: 1fr 1fr ; /*                                         */
}


form > input, textarea {
	padding        : 0.50rem       ; /*                                         */
	margin         : .75rem 1.50rem; /*                                         */
	border         : 2px solid     ; /*                                         */
	border-radius  : 0.50rem       ; /*                                         */
	border-color   : var(--dark2)  ; /*                                         */
	outline        : none          ; /*                                         */
}

figure {
	display        : flex          ; /*                                         */
	flex-wrap      : wrap          ; /*                                         */
}

figure > img {
	padding        : 0.50rem       ; /*                                         */
	border-radius  : 1.50rem       ; /*                                         */
	height         : 25vh          ; /*                                         */
	flex-grow      : 1             ; /*                                         */
}

nav {
	position       : fixed         ; /* always top right corner of the page     */
	top            : 0             ; /*                                         */
	right          : 0             ; /*                                         */
	margin-top     : 1.25rem       ; /*                                         */
	margin-right   : 1.25rem       ; /*                                         */
	padding        : 0.50rem       ; /*                                         */

	z-index        : 9999          ; /* always on top                           */
}

nav > ul > li {
	margin         : .75rem 1.00rem; /*                                         */
	display        : inline-block  ; /*                                         */
	margin-left    : 0.5rem        ; /*                                         */
	font-size      : 0.9rem        ; /*                                         */
}

nav > ul > li > a {
	font-weight    : 900           ; /*                                         */
	color          : var(--light)  ; /*                                         */
}

article.splash {
	text-align     : center        ; /*                                         */
	color          : var(--light)  ; /*                                         */
}

article.splash > h1 {
	font-size      : 4.25rem       ; /*                                         */
	font-weight    : 900           ; /*                                         */
	color          : var(--light)  ; /*                                         */
}

article.splash > p {
	font-size      : 1.50rem       ; /*                                         */
	font-weight    : 900           ; /*                                         */
}

article.right {
	position       : relative      ; /*                                         */
	display        : flex          ; /*                                         */
	justify-content: flex-end      ; /*                                         */
}

article.right > section {
	position       : relative      ; /*                                         */
	display        : block         ; /*                                         */
	margin         : auto 0        ; /*                                         */
	padding        : 3.5rem 2.5rem ; /*                                         */
	background     : var(--light)  ; /*                                         */
	width          : 45%           ; /*                                         */
}

article.right > section > h2 {
	color          : var(--dark)   ; /*                                         */
	padding-bottom : 0.5rem        ; /*                                         */
}

article.right > section > p {
	color          : var(--dark2)  ; /*                                         */
	line-height    : 1.50rem       ; /*                                         */
	text-align     : justify       ; /*                                         */
}

article.right > section > ul {
	padding-top    : 1rem          ; /*                                         */
	padding-bottom : 1rem          ; /*                                         */
	columns        : 2             ; /*                                         */
}

article.right > section > ul > li {
	padding-left   : 2rem          ; /*                                         */
}

article.center {
	display        : flex          ; /*                                         */
}

article.center > section {
	width          : 100%          ; /*                                         */
	margin         : auto 0        ; /*                                         */
	background     : var(--light)  ; /*                                         */
	color          : var(--dark2)  ; /*                                         */
	padding        : 3.5rem 20rem  ; /*                                         */
}

article.center > section > h2 {
	color          : var(--dark)   ; /*                                         */
	padding-top    : 0.5rem        ; /*                                         */
	padding-bottom : 0.5rem        ; /*                                         */
	text-align     : center        ; /*                                         */
}

article.center > section > p {
	text-align     : center        ; /*                                         */
}

article.center > section > aside {
	display        : flex          ; /*                                         */
	flex-wrap      : wrap          ; /*                                         */
}

article.center > section > aside > figure > img {
	width          : 30vh          ; /*                                         */
}

article.center > section > aside > figure > figcaption {
	color          : var(--light)  ; /*                                         */
	margin: auto 0;
	position: absolute;
	font-weight: 900;
	font-size: 1.5rem;
}

/* vim ts=2 sw=2 */